炫彩流光按钮 html+css

最新推荐文章于 2023-02-06 17:05:13 发布

a_靖

最新推荐文章于 2023-02-06 17:05:13 发布

阅读量829

点赞数

分类专栏： Web前端文章标签：按钮效果炫彩按钮点击效果

原文链接：https://youtu.be/pdH5X2mXzPk

版权

Web前端专栏收录该内容

390 篇文章 24 订阅

订阅专栏

话不多，先上效果：

简介：

用基础css做一个有一点炫酷的流光按钮，不止按钮，只要是盒子就行。

具体步骤：

1.先定义一个盒子当做按钮，如我就用a标签：

<body>
    <a href="#" class="guang">button</a>
</body>

2.先给a标签写基础的样式，比如长宽等等…：

 .guang{
        position: relative;
        display: inline-block;
        width: 220px;
        height: 80px;
        color: rgb(255, 255, 255);
        line-height: 80px;
        font-size: 35px;
        font-family: sans-serif;
        text-decoration: none;
        text-transform: uppercase;
        text-align: center;
        border-radius: 30px;
        background: linear-gradient(90deg,rgb(39, 122, 218),rgb(74, 230, 121),rgb(201, 214, 13),rgb(226, 20, 233),rgb(16, 172, 219));
        background-size: 400%;
        z-index: 1;
        text-shadow: 0 0 5px white,
                     0 0 5px white;
    }

注意：其中一些属性用处：
text-transform: uppercase; 全部换成大写字母。
background: linear-gradient(…); 线性颜色渐变，可以改成自己要的颜色。
text-shadow: 0 0 5px white,
0 0 5px white;
写两行是为了让字体更亮。

3.鼠标经过盒子产生流光的动画：

 .guang:hover{
        animation: move 5s linear alternate infinite;
    }
    @keyframes move{
        0%{
           background-position: 0%;
        }
        100%{
            background-position: 100%;
        }
    }

4.定义盒子周围的光晕阴影：

 .guang::before{
        content: '';
        position: absolute;
        top: -10px;
        left: -10px;
        width: 240px;
        height: 100px;
        background: linear-gradient(90deg,rgb(39, 122, 218),rgb(74, 230, 121),rgb(243, 169, 10),rgb(226, 20, 233),rgb(16, 172, 219));
        background-size: 400%;
        opacity: 0;
        z-index: -1;
        border-radius: 45px;
        transition: 0.6s;
       
    }
  .guang:hover::before{
        filter: blur(15px);
        opacity: 1;
        animation: move 8s linear alternate infinite;
    }

注意：其中一些属性用处：
filter: blur 滤镜，就是让其模糊

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    body{
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: black;
    }
    .guang{
        position: relative;
        display: inline-block;
        width: 220px;
        height: 80px;
        color: rgb(255, 255, 255);
        line-height: 80px;
        font-size: 35px;
        font-family: sans-serif;
        text-decoration: none;
        text-transform: uppercase;
        text-align: center;
        border-radius: 30px;
        background: linear-gradient(90deg,rgb(39, 122, 218),rgb(74, 230, 121),rgb(201, 214, 13),rgb(226, 20, 233),rgb(16, 172, 219));
        background-size: 400%;
        z-index: 1;
        text-shadow: 0 0 5px white,
                     0 0 5px white;
    }
    .guang:hover{
        animation: move 5s linear alternate infinite;
    }
    @keyframes move{
        0%{
           background-position: 0%;
        }
        100%{
            background-position: 100%;
        }
    }
    .guang::before{
        content: '';
        position: absolute;
        top: -10px;
        left: -10px;
        width: 240px;
        height: 100px;
        background: linear-gradient(90deg,rgb(39, 122, 218),rgb(74, 230, 121),rgb(243, 169, 10),rgb(226, 20, 233),rgb(16, 172, 219));
        background-size: 400%;
        opacity: 0;
        z-index: -1;
        border-radius: 45px;
        transition: 0.6s;
       
    }
    .guang:hover::before{
        filter: blur(15px);
        opacity: 1;
        animation: move 8s linear alternate infinite;
    }
</style>
<body>
    <a href="#" class="guang">button</a>
</body>
</html>

a_靖

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
炫彩流光按钮 html+css

话不多，先上效果：简介：用基础css做一个有一点炫酷的流光按钮，不止按钮，只要是盒子就行。具体步骤：1.先定义一个盒子当做按钮，如我就用a标签：<body> <a href="#" class="guang">button</a></body>2.先给a标签写基础的样式，比如长宽等等…： .guang{ position: relative; display: inline-blo
复制链接

扫一扫