电话
13363039260
分享一款金属感十足的按钮样式代码
2024-01-17 14:35 小编
HTML部分：
<divid="button">
PUSH
</div>
CSS部分：
body{background:#ddd;}
#button{
width:100px;
height:100px;
border-bottom:2pxsolid#eee;
background-image:-webkit-linear-gradient(top,#999,#d0d0d080%);
background-image:-moz-linear-gradient(top,#999,#d0d0d080%);
background-image:-ms-linear-gradient(top,#999,#d0d0d080%);
background-image:-o-linear-gradient(top,#999,#d0d0d080%);
background-image:linear-gradient(top,#999,#d0d0d080%);
-moz-border-radius:100px;
-webkit-border-radius:100px;
border-radius:100px;
box-shadow:insetrgba(0,0,0,0.2)0px5px6px;
left:50%;
top:50%;
margin-left:-50px;
margin-top:-50px;
position:absolute;
}
.butt{
position:absolute;
width:80px;
height:52px;
left:10px;
top:10px;
cursor:pointer;
font-family:"LucidaSans";
font-weight:bold;
font-size:23px;
color:#888;
text-shadow:0px1px0px#fff;
text-align:center;
padding-top:28px;
-moz-border-radius:100px;
-webkit-border-radius:100px;
border-radius:100px;
background-image:-webkit-linear-gradient(top,#eee,#bbb70%,#9f9f9f100%);
background-image:-moz-linear-gradient(top,#eee,#bbb70%,#9f9f9f100%);
background-image:-ms-linear-gradient(top,#eee,#bbb70%,#9f9f9f100%);
background-image:-o-linear-gradient(top,#eee,#bbb70%,#9f9f9f100%);
background-image:linear-gradient(top,#eee,#bbb70%,#9f9f9f100%);
background-position:06px;
background-color:#eee;
background-repeat:no-repeat;
-webkit-box-shadow:rgba(0,0,0,.4)03px6px;
-moz-box-shadow:rgba(0,0,0,.4)03px6px;
box-shadow:rgba(0,0,0,.4)03px6px;
-webkit-transition:all.1sease-in;
-moz-transition:all.1sease-in;
-ms-transition:all.1sease-in;
-o-transition:all.1sease-in;
transition:all.1sease-in;
}
.butt:hover{
background-position:00px;
-webkit-box-shadow:rgba(0,0,0,.4)03px8px;
-moz-box-shadow:rgba(0,0,0,.4)03px8px;
box-shadow:rgba(0,0,0,.4)03px8px;
}
.butt:active{
width:76px;
height:48px;
margin:2px002px;
border-bottom:1pxsolid#fff;
font-size:21px;
color:#777;
-webkit-box-shadow:insetrgba(0,0,0,.5)0px5px10px;
-moz-box-shadow:insetrgba(0,0,0,.5)0px5px10px;
box-shadow:insetrgba(0,0,0,.5)0px5px10px;
}
猜你喜欢
联络方式：
13363039260
微信二维码 