本文摘自PHP中文网，作者不言，侵删。
按钮的效果我们经常会用得到，本篇文章就来给大家分享一个漂亮的按钮效果的实现，我们来使用CSS实现一个发光的按钮效果。话不多说，我们直接来看代码
以下代码是接下来所有按钮样式的基本代码：
HTML
1 | <a class="button" href="#">Button</a>
|
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 | .button {
width:80px;
height:20px;
display: block;
padding: 1em 3.2em;
border-radius: 1.6em;
color: #fff;
font-size: 18px;
font-family: 'Lato', sans-serif;
font-weight: 700;
text-align: center;
text-decoration: none;
}
|
下面button1到button4改变的是基本颜色，并且还通过box-shadow调整按钮主体的颜色透射率来描述用于每个按钮的阴影。从button5开始设计具有渐变效果的按钮。下面我们来看具体的代码实现。
button1：
1 2 3 4 | .button {
background-color: rgba(252, 28, 143, 1);
box-shadow: 0 5px 20px rgba(252, 28, 143, .5);
}
|
效果如下：
button2：
1 2 3 4 | .button{
background-color: rgba(251, 152, 11, 1);
box-shadow: 0 5px 20px rgba(251, 152, 11, .5);
}
|
效果如下：
button3：
1 2 3 4 | .button {
background-color: rgba(241, 196, 15, 1);
box-shadow: 0 5px 20px rgba(241, 196, 15, .5);
}
|
效果如下：
阅读剩余部分
相关阅读 >>
css怎么用id进行定位
css可以使用变量吗
css margin-left属性怎么用
css怎么去除li的点
2021年值得了解的10 个 css 功能（分享收藏）
css 尺寸的百分比
css定位方式有哪几种
css transform-origin属性怎么用
css分割线怎么设置
css是什么缩写
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » CSS实现发光的按钮效果（代码示例）
