炫彩流光按钮 CSS + HTML

小丞同学

发布于 2021-08-16 15:30:45

3.7K0

发布于 2021-08-16 15:30:45

文章被收录于专栏：小丞前端库

炫彩流光按钮

写在前面

你若要喜爱你自己的价值，你就得给世界创造价值。——歌德

效果图

三个绝美的样例

HTML代码

<div class="box">
        <button class="btn">button</button>
</div>

实现过程

给按钮添加一个渐变的背景颜色
将背景的大小放大到原来的若干倍，可以自己设定，这样做是为了让渐变的效果更明显，同时后续实现流光的效果
给字体设置text-shadow属性，多设置几个可以增加亮度
当鼠标经过时，实现流光的效果，通过动画改变背景的位置来实现，相当于拖动背景，让按钮显示不一样的颜色
当鼠标经过时添加光晕的效果，通过伪元素，建一个比原先按钮大一点的盒子，先利用透明度为0隐藏起来，当鼠标经过时，改变透明度为1，同时设置filter属性，添加模糊距离，从而实现光晕的效果

CSS代码

@keyframes move {
    0% {
        background-position: 0%;
    }
    100% {
        background-position: 100%;
    }
}
.btn {
    position: relative;
    width: 300px;
    height: 110px;
    color: white;
    line-height: 80px;
    font-size: 60px;
    font-family: sans-serif;
    text-transform: uppercase;//转化为大写字母
    text-align: center;
    border-radius: 40px;
    background: linear-gradient(90deg,rgb(242, 97, 94),rgb(234, 150, 104),rgb(251, 200, 2),rgb(174, 9, 43),rgb(108, 40, 243),rgb(212, 4, 128),rgb(85, 132, 206));
    background-size: 400%;
    border: none;
    outline: none;
    text-shadow: 0 0 3px white,
                 0 0 3px white,
                 0 0 3px white;//加亮
    z-index: 1;
}
.btn:hover {
    animation: move 2s linear alternate infinite;
}
.btn::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    width: 310px;
    height: 120px;
    background: linear-gradient(90deg,rgb(242, 97, 94),rgb(234, 150, 104),rgb(251, 200, 2),rgb(174, 9, 43),rgb(108, 40, 243),rgb(212, 4, 128),rgb(85, 132, 206));
    background-size: 400%;
    opacity: 0;
    border-radius: 45px;
    transition: .6s;
    z-index: -1;
}
.btn:hover::before {
    filter: blur(10px);
    opacity: 1;
    animation: move 2s linear alternate infinite;
}

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>炫彩流光</title>
    <style>
        @keyframes move {
            0% {
                background-position: 0%;
            }
            100% {
                background-position: 100%;
            }
        }
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background-color: black;
        }
        .box {
            width: 400px;
            height: 400px;
            margin: 100px auto;
        }
        .btn {
            position: relative;
            width: 300px;
            height: 110px;
            color: white;
            line-height: 80px;
            font-size: 60px;
            font-family: sans-serif;
            text-transform: uppercase;//转为大写字母
            text-align: center;
            border-radius: 40px;
            background: linear-gradient(90deg,rgb(242, 97, 94),rgb(234, 150, 104),rgb(251, 200, 2),rgb(174, 9, 43),rgb(108, 40, 243),rgb(212, 4, 128),rgb(85, 132, 206));
            background-size: 400%;
            border: none;
            outline: none;
            text-shadow: 0 0 3px white,
                         0 0 3px white,
                         0 0 3px white;
            z-index: 1;
        }
        .btn:hover {
            animation: move 2s linear alternate infinite;
        }
        .btn::before {
            content: '';
            position: absolute;
            top: -5px;
            left: -5px;
            width: 310px;
            height: 120px;
            background: linear-gradient(90deg,rgb(242, 97, 94),rgb(234, 150, 104),rgb(251, 200, 2),rgb(174, 9, 43),rgb(108, 40, 243),rgb(212, 4, 128),rgb(85, 132, 206));
            background-size: 400%;
            opacity: 0;
            border-radius: 45px;
            transition: .6s;
            z-index: -1;
        }
        .btn:hover::before {
            filter: blur(10px);
            opacity: 1;
            animation: move 2s linear alternate infinite;
        }
    </style>
</head>
<body>
    <div class="box">
        <button class="btn">button</button>
    </div>
</body>
</html>