大家好，今天是 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;
}接下來，還是留個小作業！
我對上述代碼做了小小的修改，實現的按鈕如圖：
感興趣的同學可以自己動手復原一下！
好啦，今天的教程：《純CSS實現炫酷多彩按鈕》到這里就結束了，希望對可愛漂亮又富有愛心的你有所幫助！嘿嘿，別忘了，給我點贊+關注+評論哦！我在下面等你。。咳咳。。。下面評論區等你！
本專欄其他文章：
CSS技巧 - 一日一例 （1）：會討好的熱情按鈕
CSS技巧專欄：一日一例 2.純CSS實現 多彩邊框按鈕特效
CSS技巧專欄：一日一例 3.純CSS實現炫酷多彩按鈕特效
)
