html 按钮3d效果,HTML——3D按钮

简单编写样式

引入css样式文件

部分代码展示

编写列表代码

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;

}