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

一.前置知识

HTMLCSS3

二.案列效果

三.重要参数准备

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