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

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

效果如下：

最终效果

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

准备一个HTML标签

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

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;}