lo-ga-rie words, lines .. life

Pure CSS buttons

A small entry just because this little script is so pro it will blow your mind!
Remember the days where you needed to use a sliding door principle or a piece of javascript to make buttons with rounded corners, dropshadows and gradients? Those days are still here but wait! There is a solution! let's take a look at it:

• Rounded corners? Most browsers* support CSS3 border-radius!
• Dropshadows? Most browsers* support CSS3 box-shadow (even with alpha channel!)
• Gradients? Most browsers** support CSS3 gradients!

* All modern browsers except IE8
** All modern browsers except IE9 and IE8

So ok, without looking at IE we can turn a simple anchor tag into a nice looking button by just using CSS; for IE we need some magic; this is where your trusty other front-end developers come in and Jason Johnston developed CSS3PIE just for this; take a look at the site by clicking the name or by following this link to CSS3PIE.

Take these small snippets to get things started:

html:

<a href="http://www.logarie.nl/blog/" class="button">This is a link to lo-ga-rie</a>

css:

.button {
display: inline-block;
position: relative;
border: 1px solid #666;
padding: 5px 10px;
text-align: center;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #aaa 0px 2px 3px;
-moz-box-shadow: #aaa 0px 2px 3px;
box-shadow: #aaa 0px 2px 3px;
background: #f00;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(#00ff00));
background: -moz-linear-gradient(#ff0000, #00ff00);
background: linear-gradient(#ff0000, #00ff00);
-pie-background: linear-gradient(#ff0000, #00ff00);
behavior: url(/PIE.htc);
}

Make sure the path to PIE is working and there you go, a nice looking button while only using html and css! Why should we care about this?
Older techniques like the sliding door are adding unused DOM elements to the html; which slows down page rendering, isn't the best for SEO and could be breaking the accesibility of your site. Techniques like I explained with fancybutton is only working with javascript enabled browsers and thus not fully complient with the accesibility standards. This technique is just using that what is provided by the browser; with a gracefull fallback (background: #f00;) in case nothing else works. Creating hover and visited states of this button is as easy and you think; just a few extra lines of CSS; don't forget to include PIE in those rules!