Easy Buttons With CSS3

With increasing support for CSS3 selectors in modern browsers including Chrome 5, Firefox 3.6, Safari 5 and IE9, designers and developers are getting more opportunities to give users eye candy on the web with ease. One of such applications is the ability to quickly make attractive "fake" buttons out of simple anchor tags. I say fake because they're not form input elements or actual HTML button elements, just anchors made to look and act like buttons. This allows you to turn any link into a button without the need for any images. In the example CSS below, All you need to do in your markup is to apply a CSS class of "fancyButton" to your link and instantly your boring web link is transformed into a button with rounded corners, drop shadows and hover feedback.

Markup

<a class="fancyButton" href="#" title="Click Me!">Click Me!</a> <a class="fancyButton" href="#" title="Click Me Too">Click Me Too</a> <a class="fancyButton" href="#" title="I am also a button!">I am also a button!</a>

CSS

.fancyButton { 
    padding: 6px 8px; 
    background-color: #00AFD8; 
    color: #fff; 
    text-decoration: none; 
    margin: 0 5px 0 0; 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    border-radius: 3px; 
    text-shadow: #333 1px 1px 4px; 
    -moz-box-shadow: 0 0 5px #333; 
    -webkit-box-shadow: 0 0 5px #333; 
    box-shadow: 0 0 5px #333;
}
.fancyButton:hover { 
    background-color: #37C0E0;
}

Result

  

You might be saying "THIS IS TOO GOOD TO BE TRUE, THERE'S NO WAY IT LOOKS THAT GREAT IN EVERY BROWSER!!!!". First off, calm down. There's no need to yell, they're only buttons. However, you are in fact correct in that statement. Browsers such as IE6, IE7, Firefox 2, Safari 3 won't give you the rounded corners or the drop shadows because they were created before CSS3 was starting to take root in the development community. That's okay though because the buttons are still functional and for the most part appear the same, you just lose some of the bonus design elements: 

  

With these techniques, the buttons work across all modern platforms and if a user is using an ultra-modern browser, they'll get added design effects that just make your site look even nicer! For more info on CSS3 selectors and techniques you can check them out here.