CSS技巧专栏：一日一例 4.纯CSS实现两款流光溢彩的酷炫按钮特效

大家好，今天是 CSS技巧专栏：一日一例 第三篇《纯CSS实现两款流光溢彩的酷炫按钮特效》

先看图：

特此说明：

本专题专注于讲解如何使用CSS制作按钮特效。前置的准备工作和按钮的基本样式，都在本专栏第一篇文章中又详细说明。自本专栏第四篇文章起，本专栏都将直接跳过前面的内容，不再重复复制，需要了解按钮基础样式的同学，请移步：《CSS技巧 - 一日一例 （1）：会讨好的热情按钮》。

第一步：基本页面布局

<div class="container"><button class="base">流光溢彩</button><button class="base">边框流光溢彩</button>
</div> 

第二步：按钮基本样式

第三步：按钮渐变色的填充 和 动画

给按钮写渐变色填充，写下按钮需要的样式：

.button-primary {position: relative;border: transparent;outline: transparent;color: #fff;background: linear-gradient(45deg, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000,#fb0094);background-size: 500%;animation: animate 20s linear infinite;   
}@keyframes animate {0% {background-position: 0 0;}50% {background-position: 300% 0;}100% {background-position: 0 0;}
}

然后，我们别忘了把这个类加到html代码中哦！

<div class="container"><button class="base btn-primary">流光溢彩</button><button class="base btn-primary">边框流光溢彩</button>
</div> 

在浏览器预览按钮效果：

第四步：给按钮文字增加阴影

text-shadow: -1px -1px 0px rgba(0,0,0,0.3),1px 1px 0px rgba(255,255,255,0.3);

本例在文本上做了两个阴影：

1. 阴影1：在x轴和Y轴各向前1像素偏移（向上，向左），模糊为0，颜色为黑色，透明度30%
2. 阴影2：在x轴和Y轴各向后1像素偏移（向下，向右），模糊为0，颜色为白色，透明度30%

通过这两个文字阴影，给按钮上的文字增加了一个向下凹陷的效果。如图：

第五步：给按钮增加彩色的光

经过上一篇的案例：CSS技巧专栏：一日一例 3.纯CSS实现炫酷多彩按钮特效 我们已经知道，只要给彩色渐变增加blur滤镜，我们就可以得到一个扩散的模糊的炫彩的光。按照昨天的思路，我们就可以实现炫光效果：

.button-primary:before, .button-primary:after {content: "";position: absolute;   border-radius: 2rem; top: -2px;left: -2px;background: linear-gradient(45deg, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000,#fb0094);background-size: 500%;width: calc(100% + 4px);height: calc(100% + 4px);z-index: -1;animation: animate 20s linear infinite;}
.button-primary:after {filter: blur(20px);
}

到这里，按钮其实已经很炫了！

对了，还要给右边的按钮增加一个黑色蒙版。

.btn_mask{top:-1px;left: -1px;background: var(--main-bg-color);transition: all .5s;
}

<div class="container"><button class="base button-primary" >流光溢彩</button><button class="base button-primary btn_mask" >边框流光溢彩</button>
</div>  

第六步：添加鼠标响应动画

相对前一篇的按钮，这一篇我们的按钮交互也没有难度，接下来我们给两个按钮分别增加一些交互。

.btn_mask:hover{background: rgba(17, 17, 17, 0.5);transition: all .5s;
}

接下来，还是留个小作业！

我对上述代码做了小小的修改，实现的按钮如图：

感兴趣的同学可以自己动手复原一下！

好啦，今天的教程：《纯CSS实现炫酷多彩按钮》到这里就结束了，希望对可爱漂亮又富有爱心的你有所帮助！嘿嘿，别忘了，给我点赞+关注+评论哦！我在下面等你。。咳咳。。。下面评论区等你！

本专栏其他文章：

CSS技巧 - 一日一例 （1）：会讨好的热情按钮

CSS技巧专栏：一日一例 2.纯CSS实现 多彩边框按钮特效

CSS技巧专栏：一日一例 3.纯CSS实现炫酷多彩按钮特效