A couple of weeks ago I posted Realistic Looking CSS3 Buttons, in which I tried to make awesome-looking CSS3 buttons that required no extra markup. For people who like more code and less talk, the end of the post has the link to the demo.
As awesome as they were, they required an explicit width. This meant that they didn’t adapt gracefully to different labels—you had to explicitly set a width on the buttons that might not fit the actual label properly. This had been necessary to get the nice inner white border, which I’m now using two instances of inset
box-shadow to replicate (many CSS3 declarations allow for multiples, such as
box-shadow). I would have preferred to do it with only one declaration, but
box-shadow: 0 0 1px #fff inset; produced too dim of an inner border for my liking.
I also wanted a better-looking button depressed state. I emulated the inner shadow typical of OS X Leopard-era buttons with a third inset
box-shadow on the
:active state, as you can see below. Pressing the buttons feels really awesome if your browser supports CSS Transitions.
Speaking of CSS transitions, they’re now used consistently on the
:hover state, by changing the background-color on hover instead of changing the gradient (gradients don’t currently animate in a transition). I also did a bit more work to make it cross-browser friendly: I used backup colors wherever
rgba() notation was used, as well as a gradient.png fallback for browsers incapable of CSS gradients.
Here’s a few things I found along the way:
- Firefox 3.7 nightly (which will be FF4 eventually I think) renders the buttons the best.
- WebKit doesn’t actually support inset
box-shadowyet in Safari 4 or Mobile Safari. So, they get left behind for now. But WebKit nightly and Chrome have landed support for inset box-shadow.
- WebKit currently has a fascinating bug with inset box-shadow and transitions. Using WebKit nightly or Chrome, try clicking on the “Wonky Webkit Transition” button. The
box-shadowstarts on the outside and then snaps to the inside at the end of the transition.
- Firefox does weird things with an
:afterpseudo-element placed on a button element. I did some hacky things to work around that at the default size using
@-moz-document. Not awesome or recommended.
Without further ado (and I use the phrase only to plead with the people of the world who say “without further adieu” to STOP DOING IT WRONG), check out the Realistic CSS3 Buttons Redux demo.