HTML+CSS完成毛玻璃发光按钮的制作

炫酷的玻璃形态按钮的制作

<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