纯CSS实现3D按钮效果的实例解析

a.css-3d-btn{

 position:relative;

 color: rgba(255,255,255,1);

 text-decoration:none;

 background-color: rgba(219,87,51,1);

 font-family:"Microsoft YaHei", 微软雅黑, 宋体;

 font-weight:700;

 font-size:3em;

 display:block;

 padding:4px;

 border-radius:8px;

 /* let's use box shadows to make the button look more 3-dimensional */

 box-shadow:0px9px0pxrgba(219,31,5,1),0px9px25pxrgba(0,0,0, .7);

 margin:100pxauto;

 width:160px;

 text-align:center;

 -webkit-transition:all.1s ease;

 -moz-transition:all.1s ease;

 transition:all.1s ease;

}

/* now if we make the box shadows smaller when the button is clicked, it'll look like the button has been "pushed" */

a.css-3d-btn:active{

 box-shadow:0px3px0pxrgba(219,31,5,1),0px3px6pxrgba(0,0,0, .9);

 position:relative;

 top:6px;

}