分享一款金属感十足的按钮样式代码
导读：HTML部分： PUSH CSS部分： body{background:#ddd;} #button{ width:100px; height:100px; border-bottom:2pxsoli...
HTML部分：
PUSH
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;
}
本文转载自中文网
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 分享一款金属感十足的按钮样式代码
本文地址： https://pptw.com/jishu/664630.html