/ Published in: CSS
CSS3 Button\\r\\n<p>This uses no images and has fall-back colors for IE browsers.</p>
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
/* CSS3 BUTTON ----------------------------------------------------- */ .button { border:1px solid #1D4253; color:#FFFFFF; text-shadow:0 -1px 0 #004e68; font-size:12px; display:inline-block; margin:8px 0; text-align:center; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; background-color:#007197; background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(0,93,124)), color-stop(1, rgb(0,136,181)) ); background-image: -moz-linear-gradient( center bottom, rgb(0,93,124) 0%, rgb(0,136,181) 100% ); -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.55); -moz-box-shadow:0 2px 5px rgba(0, 0, 0, 0.55); box-shadow:0 2px 5px rgba(0, 0, 0, 0.55); } .button:hover { background-color:#0081ab; background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(0,116,154)), color-stop(1, rgb(0,165,198)) ); background-image: -moz-linear-gradient( center bottom, rgb(0,116,154) 0%, rgb(0,165,198) 100% ); text-decoration:none; } .button:active { background-color:#006486; background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(0,133,166)), color-stop(1, rgb(0,83,122)) ); background-image: -moz-linear-gradient( center bottom, rgb(0,133,166) 0%, rgb(0,83,122) 100% ); -webkit-box-shadow:0 0 2px rgba(0, 0, 0, 0.75); -moz-box-shadow:0 0 2px rgba(0, 0, 0, 0.75); box-shadow:0 0 2px rgba(0, 0, 0, 0.75); } .button span { padding:8px 20px; border-top:1px solid #00B8D3; display:block; font-weight:bold; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; } .button span:active { border-top-color:transparent; } /* HTML MARK-UP ----------------------------------------------------- */ <a href="#" class="button"><span>CSS3 Button - No Images</span></a>
URL: http://marioluevanos.com/playground/CSS3%20Button/