WordPress Hosting
Free Photos
WordPress Themes

3D Buttons only in CSS

HTML
<h2>3D CSS Button</h2> <a href="#" class="button-3d">PUSH ME</a>
CSS
body { text-align: center; color:#FFFFFC; background-color: #6C8EAD; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; margin-top: 200px; } .button-3d { font-size: 26px; letter-spacing: 6px; position:relative; width: auto; display:inline-block; color:#FFFFFC; text-decoration:none; border-radius:3px; border:solid 1px #B2434E; background:#A23E48; text-align:center; padding:40px 80px 40px; margin: 12px; -webkit-transition: all 0.1s; -moz-transition: all 0.1s; transition: all 0.1s; -webkit-box-shadow: 1px 6px 0px #7F3038; -moz-box-shadow: 1px 6px 0px #7F3038; box-shadow: 2px 6px 0px #7F3038; } .button-3d:active{ -webkit-box-shadow: 0px 2px 0px #7F3038; -moz-box-shadow: 0px 2px 0px #7F3038; box-shadow: 0px 2px 0px #7F3038; position:relative; top:4px; } h2 { font-size: 36px; letter-spacing: 2px; }
JAVASCRIPT
Expand for more options Login