当前位置: 首页 > Web前端 > HTML

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

时间:2023-04-02 12:38:06 HTML

炫酷玻璃按钮的制作重要参数准备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:015px35pxrgba(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鼠标按钮背景伪移动时元素宽高:50%;width:80%;13伪元素背景颜色和阴影1.背景1background:#ff1f71;box-shadow:005px#ff1f71,0015px#ff1f71,0030px#ff1f71,0060px#ff1f71;2.背景2background:#2bd2ff;box-shadow:005px#2bd2ff,0015px#2bd2ff,0030px#2bd2ff,0060px#2bd2ff;3.背景3background:#1eff45;box-shadow:005px#1eff45,0015px#1eff45,0030px#1eff45,0060px#1eff45;undefined}undefined##4.具体实现步骤分析>看B站教程博哥教你快速实现磨砂玻璃发光按钮的制作_哔哩哔哩_bilibili