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

一.前置知识

• 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;
}

四.具体实现步骤思路解析>观看B站教程

博哥教你快速实现毛玻璃发光按钮制作_哔哩哔哩_bilibili