Softly Clicking
Dan Cederholm’s CSS3 button is a nifty animation demo showing how you can achieve a great button effect using only a small bit of markup and new-ish CSS3 rules.
It looks terrific, and has a smooth click effect that degrades nicely on older browsers.
But (all the time with the but) it’s kind of soft.
When you click, you get a slight delay before the button sinks to the page, like it has weight, or some sort of spring pushing back against your finger (or mouse, as the case may be.)
(Actually, scratch finger. It doesn’t quite behave properly in mobile Safari.)
At first I thought that this demonstrates an interesting weakness in using CSS3 transitions: they are applied in both directions. That is, you get the same timing and transition when the translation is applied on :active, and when it is removed on mouseup.
But then I got an idea. I saved the demo page locally, and then copied the transitions from the button rules to the :active rules, and made the time 0 seconds, to make the transition instant.
And it worked! Turns out the transitions on the :active state override the transitions on the normal state (as they should) and so we get an instant click with a soft reset. Secondly, you don’t have to click-hold to see the full transition to pressed, as in the original. And finally, it now works in iOS.
Try it here and compare to the original demo.