html 按钮立体效果,纯CSS实现的立体按钮

CSS

语言：

CSSSCSS

确定

body{

background: #35393d;

}

.controls_ui{

width: 300px;

margin: 40px auto;

}

.button{

color: #0f1214;

text-shadow:0 1px 0 #484f58;

margin-bottom: 20px;

margin-right: 5px;

border:1px solid #202124;

box-shadow: 0 1px 0 #616a74 inset,0 1px 5px #212528;

background: -webkit-linear-gradient(top,#474d54,#2f363d);

background: -moz-linear-gradient(top,#474d54,#2f363d);

background: -ms-linear-gradient(top,#474d54,#2f363d);

background: -o-linear-gradient(top,#474d54,#2f363d);

background: linear-gradient(top,#474d54,#2f363d);

}

.button:nth-child(3n){

margin-right: 35px;

}

.button:hover{

background: -webkit-linear-gradient(top,#5b6167,#30373e);