今天分享一个用纯CSS实现的3D按钮。
css巧妙利用了box-shadow来实现3D物体的立体感，当按钮按下的时候再去修改box-shadow和top值。
让人感觉有一种按钮被按下的感觉。css代码非常少，如下所示：
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; }效果如下：
[纯css实现3d按钮效果图]纯CSS实现3D按钮效果的实例解析
http://m.bbyears.com/wangyetexiao/116513.html
推荐访问: