HTML——3D按钮

简单编写样式

引入css样式文件

<link href="two.css" type="text/css" rel="stylesheet"/> 

部分代码展示

<style type="text/css">
  ul {list-style:none;}
  a.button{
    display:block;
    float:left;
    position:relative;
    height:25px;
    width:80px;
    margin:0 10px 18px 0;
    text-decoration:none;
    font:12px "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight:bold;
    line-height:25px;
    text-align:center;
  }
  </style>

编写列表代码

<ul id="container">
    <li><a href="#" class="button gray"> Download</a></li>
    <li><a href="#" class="button pink"> Download</a></li>
    <li><a href="#" class="button blue"> Download</a></li>
    <li><a href="#" class="button green"> Download</a></li>
    <li><a href="#" class="button turquoise"> Download</a></li>
    <li><a href="#" class="button black"> Download</a></li>
    <li><a href="#" class="button darkgray"> Download</a></li>
    <li><a href="#" class="button yellow"> Download</a></li>
    <li><a href="#" class="button purple"> Download</a></li>
    <li><a href="#" class="button darkblue"> Download</a></li>
  </ul>

css样式代码

/*灰色*/
.gray,.gray:hover{
	color:#555;
	border-bottom:4px solid #b2b1b1;
	background:#eee;
}
.gray:hover{
	background:#e2e2e2;
}
a.button:before,a.button:after{
	content:'';
	position:absolute;
	left:-1px;
	height:25px;
	width:80px;
	bottom:-1px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius:3px;
}
a.button:before{
	height:23px;
	bottom:-4px;
	border-top:0;
	-webkit-border-radius:0 0 3px 3px;
	-moz-border-radius:0 0 3px 3px;
	border-radius:0 0 3px 3px;
	-webkit-box-shadow:0 1px 1px 0px #bfbfbf;
	-moz-box-shadow:0 1px 1px 0px #bfbfbf;
	box-shadow:0 1px 1px 0px #bfbfbf;
}
/*金属特质*/
a.button{
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius:3px;
}
/*边框定义阴影*/
a.button:before,a.button:after{
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius:3px;
}
a.button:before{
	-webkit-border-radius:0 0 3px 3px;
	-moz-border-radius:0 0 3px 3px;
	border-radius:0 0 3px 3px;
	-webkit-box-shadow:0 1px 1px 0px #bfbfbf;
	-moz-box-shadow:0 1px 1px 0px #bfbfbf;
	box-shadow:0 1px 1px 0px #bfbfbf;
}
a.gray,a.gray:hover, a.gray:visited{
	color:#555;
	border-bottom:4px solid #b2b1b1;
	text-shadow:0px 1px 0px #fafafa;
	background:#eee;
	background:-webkit-gradient(linear, left top, left bottom, from(#eee),to(#e2e2e2));
	background:-moz-linear-gradient(top,#eee,#e2e2e2);
	box-shadow:inset 1px 1px 0 #f5f5f5;
}
.gray:before,.gray:after{
	border:1px solid #cbcbcb;
	border-bottom:1px solid #a5a5a5;
}
.gray:hover{
	background:#e2e2e2;
	background:-webkit-gradient(linear, left top, left bottom, from(#e2e2e2),to(#eee));
	background:-moz-linear-gradient(top, #e2e2e2, #eee);
}
a.button:active{
	border:none;
	bottom:-4px;
	margin-bottom:22px;
	-webkit-box-shadow:0 1px 1px #fff;
	-moz-box-shadow:0 1px 1px #fff;
	box-shadow:1px 1px 0 #fff,inset 0 1px 1px rgba(0,0,0,0.3);
}
a.button:active:before,
a.button:active:after{
	border:none;
	-webkit-box-shadow:none;
	-moz-box-shadow:none;
	box-shadow:none;
}