纯CSS实现一个3D按钮

效果: 纯CSS实现一个3D按钮
文章图片
代码: html:

3D

【纯CSS实现一个3D按钮】css:
body{ background:#229FFD; } .btn{ font-weight:bold; font-size:25px; background:#fff; display:inline-block; width:100px; height:100px; text-align:center; line-height:100px; border-radius:100%; margin:50px; box-shadow: 0 10px 0 #e0e0e0, 0 15px 2px rgba(0,0,0,0.2); cursor:pointer; transition:all 0.2s; } .btn:active{ transform:translateY(8px); box-shadow: 0 2px 0 #e0e0e0, 0 4px 2px rgba(0,0,0,0.3); }

    推荐阅读