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 #24;
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);
background: -moz-linear-gradient(top,#5b6167,#30373e);
background: -ms-linear-gradient(top,#5b6167,#30373e);
background: -o-linear-gradient(top,#5b6167,#30373e);
background: linear-gradient(top,#5b6167,#30373e);
}
.button:active{
box-shadow: 0 1px #484c50;
background: -webkit-linear-gradient(top,#232930,#3c4249);
background: -moz-linear-gradient(top,#232930,#3c4249);
background: -ms-linear-gradient(top,#232930,#3c4249);
background: -o-linear-gradient(top,#232930,#3c4249);
background: linear-gradient(top,#232930,#3c4249);
}
.round,
.square{
width: 30px;
height: 30px;
}
.round,
.roundbig{
border-radius:15px;
}
.square,
.squarebig{
border-radius:5px;
}
.button:after{
display: block;
}
.round:nth-of-type(1):after,
.square:nth-of-type(4):after{
content: "\2716";
}
.round:nth-of-type(2):after,
.square:nth-of-type(5):after{
content: "\2714";
}
.round:nth-of-type(3):after,
.square:nth-of-type(6):after{
content: "\271a";
}
.round:nth-of-type(7):after,
.square:nth-of-type(10):after{
content: "\2717";
}
.round:nth-of-type(8):after,
.square:nth-of-type(11):after{
content: "\2713";
}
.round:nth-of-type(9):after,
.square:nth-of-type(12):after{
content: "\271d";
}
.roundbig,
.squarebig{
width: 80px;
height: 30px;
}
@charset "utf-8";
@import url("/download/reset.css");
/* -------------------------------------------------
* common
* -------------------------------------------------
*/
.page{
text-align:left;
padding-top:40px;
}
.wrap_top_nav{
background-color:#333;
box-shadow:0 1px 3px rgba(0, 0, 0, 0.25), 0 -1px 0 rgba(0, 0, 0, 0.1) inset;
height:40px;
}
#top_nav{
width:1000px;
margin:0 auto;
position:relative;
}
#top_nav a{
font-size:16px;
line-height:40px;
float:left;
margin-right:20px;
color:#999;
text-decoration:none;
}
#top_nav a:hover{
color:#fff;
}
#top_nav li:nth-child(1) a{
background-image:url(/sites/all/themes/marvin/logo.png);
background-position: 0 -12px;
background-repeat: no-repeat;
background-size: 68px 60px;
padding-left:74px;
color:#fff;
width:74px;
overflow:hidden;
}
#read{
position:absolute;
right:0;
top:0;
}
#header{
text-align:center;
}
#header .white{
color:#fff;
}
#header .blank{
color:#444;
}
#header h1{
font-size:24px;
}
#header h2{
font-weight:normal;
}
#ad_w3cplus {
width: 750px;
margin: 100px auto;
text-align: center;
}
#ad_w3cplus .grid-ad {
float:left;
}
如果觉得《html 按钮立体效果 纯CSS实现的立体按钮》对你有帮助，请点赞、收藏，并留下你的观点哦！
