Giving dimension to HTML buttons through CSS gradients and box shadows.

Total. Redo.

Not that long ago I had snappy divs-turned-buttons with JavaScript events to handle click and hover states. They were snappy and whiz-bang and filled with the CSS3 magic.

…and then I remembered there are not only button tags in HTML already, but there’re :hover and :active pseudo classes too. The latter of which has full support since IE8. (eye roll)

So let’s do the buttons all over again, shall we? With a little more semantic code and baked-in CSS goodness. We’ll still need a wee bit of JavaScript to handle the button’s “on” state, but that’s a mere click event as opposed to a dozen lines of code.

Button Recipe