共计 1031 个字符，预计需要花费 3 分钟才能阅读完成。
炫酷的玻璃状态按钮的制作
| <font color=white> 作者: 博哥 工夫:2023-01-18</font> |
### 一. 前置常识
HTML
CSS3
### 二. 案列成果
## 三. 重要参数筹备
1. 页面背景色 –background-color: #350048;
2. 父容器宽度 –container-width: 600px;
3. 按钮宽度 –bth-width: 155px;
4. 按钮高度 –btn-height: 50px;
5. 按钮背景色 –btn-a-background-color: rgba(255,255,255,0.05);
6. 按钮暗影色 –btn-a-box-shadow: 0 15px 35px rgba(0,0,0,0.2);
7. 按钮边框色彩 –btn-a-border-top-color:rgba(255,255,255,0.1);
8. 按钮圆角 –btn-a-border-radius:30px;
9. 按钮字体色彩 –btn-a-color: #fff;
10. 按钮为元素 背景色 –btn-a-before-background-color:rgba(255, 255, 255, 0.15) 11. 按钮背景伪元素的宽高 –btn-before-background-width:30px;
–btn-before-background-height:10px;
–btn-after-background-width:30px;
–btn-after-background-height:10px;
12 鼠标挪动时按钮背景伪元素宽高 height: 50%;
width: 80%;
13 伪元素背景色和暗影
1. 背景 1
background: #ff1f71;
box-shadow: 0 0 5px #ff1f71, 0 0 15px #ff1f71, 0 0 30px #ff1f71, 0 0 60px #ff1f71;
2. 背景 2
background: #2bd2ff;
box-shadow: 0 0 5px #2bd2ff, 0 0 15px #2bd2ff, 0 0 30px #2bd2ff, 0 0 60px #2bd2ff;
3. 背景 3
background: #1eff45;
box-shadow: 0 0 5px #1eff45, 0 0 15px #1eff45, 0 0 30px #1eff45, 0 0 60px #1eff45;undefined}undefined
## 四. 具体实现步骤思路解析 > 观看 B 站教程
博哥教你疾速实现毛玻璃发光按钮制作_哔哩哔哩_bilibili
