看到一个好看的按钮,就记录下来。
demo
我是按钮
Code
<span class="btn">我是按钮<span class="dome_shadow"></span></span>
.btn {
margin-top: 14px;
width: 190px;
height: 36px;
background: -webkit-gradient(linear,left top,left bottom,from(#fa2800),color-stop(#ff5e3d),to(#ff5e3d));
background: -o-linear-gradient(top,#fa2800,#ff5e3d,#ff5e3d);
background: linear-gradient(180deg,#fa2800,#ff5e3d,#ff5e3d);
border-radius: 8px;
line-height: 36px;
font-size: 14px;
font-family: PingFangSC,PingFangSC-Semibold;
text-align: center;
color: #fff;
font-weight: 700;
border: none;
margin: 48px auto 0 auto;
display: block;
position: relative;
cursor: pointer;
}
.btn:after {
content:'';
display: block;
position: absolute;
bottom: 0;
width: 70%;
height: 7px;
background: #ffe163;
opacity: .59;
-webkit-filter: blur(7.5px);
-moz-filter: blur(7.5px);
-ms-filter: blur(7.5px);
filter: blur(7.5px);
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}