带你看好玩的CSS-霓虹灯按钮_霓虹灯设置

liuian 2025-09-09 04:33 36 浏览

对于前端开发人员来说，css是我们再熟悉不过的朋友的，它就相当于是我们页面的衣服，页面好不好看，就看我们css运用的是否炉火纯青。css学起来简单，但是我们要把它“修炼”到出神入化境界，那这可不是一丁点时间就可以的，需要我们的日积月累，时刻专研。

而今天，就带给大家一个CSS特效-霓虹灯按钮，这也是我看到很不错的效果，带来分享给大家，希望大家喜欢

效果如下：

那好，废话不多说，开始我们的CSS代码。

准备一个HTML标签

// 这里我们用div标签来模拟button按钮，标签可以随意，a、p、span等都可以
// 通常在开发中使用别的标签来代替button标签，是因为原始的标签样式不好看，
// 我们还得重置样式，而其他标签不带有样式，我们可以更好的控制自己想要的样式，
// 当然，button标签也是可以的，但是如前面所说，原始的样式需要我们重置。
<div class="btn">button</div>

CSS部分的代码

body {
    margin: 0;
    padding: 0;
    background: #000; // 黑色背景，只为更能突出样式效果
}
// 初始化按钮样式
.btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    color: #fff;
    font-size: 24px;
    font-family: sans-serif;
    text-decoration: none;
    text-transform: uppercase;
    box-sizing: border-box;
    // linear-gradient() 渐变属性，函数用于创建一个表示两种或多种颜色线性渐变的图片
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 400%;
    border-radius: 30px;
}

初始样式为这样：

然后我们给按钮加上动画，代码如下：

.btn:hover {
  	// linear: 动画从开始到结束具有相同的速度。
    // infinite: 无限次播放
    animation: animate 8s linear infinite;
}
@keyframes animate {
    0% {
        background-position: 0%;
    }
    100% {
        background-position: 400%;
    }
}

效果就变为下面这样：

最后我们给它加上鼠标移上去的效果，代码如下：

.btn::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    z-index: -1;
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 400%;
    border-radius: 40px;
    opacity: 0;
    transition: .5s;
}
.btn:hover::before {
    filter: blur(20px);
    opacity: 1;
    animation: animate 8s linear infinite;
}

现在这样，就是我们的最终效果了：

就此，我们的霓虹灯的按钮效果就完成了

不足百行，我们就完成了这个效果，以下是我们的CSS的全部代码：

body {
    margin: 0;
    padding: 0;
    background: #000;
}
.btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    color: #fff;
    font-size: 24px;
    font-family: sans-serif;
    text-decoration: none;
    text-transform: uppercase;
    box-sizing: border-box;
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 400%;
    border-radius: 30px;
}
.btn:hover {
    animation: animate 8s linear infinite;
}
@keyframes animate {
    0% {
        background-position: 0%;
    }
    100% {
        background-position: 400%;
    }
}
.btn::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    z-index: -1;
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 400%;
    border-radius: 40px;
    opacity: 0;
    transition: .5s;
}
.btn:hover::before {
    filter: blur(20px);
    opacity: 1;
    animation: animate 8s linear infinite;
}

html 按钮