大家好，今天是 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：在x轴和Y轴各向前1像素偏移（向上，向左），模糊为0，颜色为黑色，透明度30%
- 阴影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;
}接下来，还是留个小作业！
我对上述代码做了小小的修改，实现的按钮如图：
感兴趣的同学可以自己动手复原一下！
本例按钮源码下载：https://download.csdn.net/download/uuplay0216/89574851
好啦，今天的教程：《纯CSS实现炫酷多彩按钮》到这里就结束了，希望对可爱漂亮又富有爱心的你有所帮助！嘿嘿，别忘了，给我点赞+关注+评论哦！我在下面等你。。咳咳。。。下面评论区等你！
本专栏其他文章：
CSS技巧专栏：一日一例1.会讨好的热情按钮
CSS技巧专栏：一日一例 2.纯CSS实现 多彩边框按钮特效
CSS技巧专栏：一日一例 3.纯CSS实现炫酷多彩按钮特效
CSS技巧专栏：一日一例 4.纯CSS实现两款流光溢彩的酷炫按钮特效
CSS技巧专栏：一日一例 5-纯CSS实现背景色从四周向中心填充的按钮特效
CSS技巧专栏：一日一例 6 - 纯CSS实现粉红色跳出来的立体按钮特效
CSS技巧专栏：一日一例 7 - 纯CSS实现炫光边框按钮特效
CSS技巧专栏：一日一例 8 - 纯CSS利用mask属性实现按钮边框对称包围特效
