Button

This is really more of a CSS3 button than an HTML5 button. For the full experience, you need a recent WebKit browser, as this uses cutting-edge, WebKit-only attributes, but it should degrade gracefully in other browsers. (Note that no JavaScript is involved.) If you wanted to make it fully cross-browser, you could use background images for the gradient, border, and shadow - in fact, you could even use image replacement for the text. This would be basic HTML and CSS. I was going for most accessible and most use of CSS3, which people consider (although perhaps unknowingly) part of HTML5.

Thanks to mahade for the animated transition! (Hope you don't mind me stealing your code. :) My first draft had everything but that. (By the way, I originally didn't use a <div>, but it was necessary to get the background animations working right.)

Original Challenge

My Blog | My Twitter

For the record, here is my original draft, which uses "pure" CSS3 and no <div>, but doesn't have the transition:

Button