尊敬的用户，您还未登录，登录之后更精彩！
纯CSS3 3D按钮点击效果
显示效果 :
点击效果 :
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3 3D按钮</title>
<style>
ul{ list-style: none; width: 120px; margin: auto; margin-top: 200px; } a.button{ display: block; position: relative; height: 25px; line-height: 25px; width: 120px; margin: 0 10px 18px 0; text-decoration: none; font-weight: 700; text-align: center; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .gray,.gray:hover{ color: #555; border-bottom: 4px solid #b2b1b1; background: #eee; } .gray:hover{ background: #e2e2e2; box-shadow: 1px 1px 0 #fff,inset 0 1px 1px rgba(0,0,0,0.3); } a.button:before,a.button:after{ content: ""; position: absolute; left: -1px; height: 25px; width: 120px; line-height: 25px; 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 0 #bfbfbf; box-shadow: 0 1px 1px 0 #bfbfbf; } a.button:active{ border: none; bottom: -4px; margin-bottom: 22px; -webkit-box-shadow: 0 1px 1px 0px #fff; -moz-box-shadow: 0 1px 1px 0 #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: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } </style> </head> <body> <ul id="container"> <li><a href="" class="button gray">测试3d按钮</a></li> </ul> </body> </html> 
