HTML——3D按钮

简单编写样式

引入css样式文件

部分代码展示

编写列表代码

    
 Download
    
 Download
    
 Download
    
 Download
    
 Download
    
 Download
    
 Download
    
 Download
    
 Download
    
 Download
  

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;
}