炫酷的玻璃形态按钮的制作
一.前置知识
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