利用css3制作3D样式按钮
效果图如下：
源码如下：
<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"> body { font-family: Arial, sans-serif; } #container { margin: 120px auto; text-align: center; } .button { -webkit-transform: rotateX( 35deg ); position: relative; display: inline-block; width: 100px; padding: 42px 15px; margin: 0px 10px; background-color: #C91826; color: #fff; font-weight: bold; font-size: 40px; text-decoration: none; text-align: center; text-shadow: 0px -1px 0px rgba(0,0,0,0.5); border: 1px solid; border-color: #B21522; border-radius: 78px; -moz-border-radius: 78px; -webkit-border-radius: 78px; box-shadow: inset 0px -4px 5px rgba(255,255,255,0.2), inset 0px 1px 5px rgba(255,255,255,0.2), /**/ 0px 12px 0px #231F20, 0px 14px 0px #231F20, 0px 16px 0px #231F20, /**/ 0px 8px 5px rgba(0,0,0,0.5); -moz-box-shadow: inset 0px -4px 5px rgba(255,255,255,0.2), inset 0px 1px 5px rgba(255,255,255,0.2), /**/ 0px 12px 0px #231F20, 0px 14px 0px #231F20, 0px 16px 0px #231F20, /**/ 0px 8px 5px rgba(0,0,0,0.5); -webkit-box-shadow: inset 5px -4px 5px rgba(255,255,255,0.2), inset 5px 1px 5px rgba(255,255,255,0.2), /**/ 0px 12px 0px #231F20, 0px 14px 0px #231F20, 0px 16px 0px #231F20; } .button:hover { background-color: #B21522; color: #e3e3e3; } .button:active { top: 8px; box-shadow: inset 0px 4px 5px rgba(255,255,255,0.4), inset 0px -1px 5px rgba(255,255,255,0.2), /**/ 0px 8px 0px #231F20, /**/ 0px 9px 5px rgba(0,0,0,0.5); -moz-box-shadow: inset 0px 4px 5px rgba(255,255,255,0.4), inset 0px -1px 5px rgba(255,255,255,0.2), /**/ 0px 8px 0px #231F20, /**/ 0px 9px 5px rgba(0,0,0,0.5); -webkit-box-shadow: inset 0px 4px 5px rgba(255,255,255,0.4), inset 0px -1px 5px rgba(255,255,255,0.2), /**/ 0px 8px 0px #231F20, /**/ 0px 9px 5px rgba(0,0,0,0.5); } </style> </head> <body> <div id="container"> <a href="#" class="button">开始</a> <a href="#" class="button">结束</a> </div> </body> </html>