CSS3 Animated Button

2014:02:19

See the Pen CSS3 Border-radius morph by Jonathan Sullivan (@jonsully) on CodePen.

I collected this animation from snowbird.com, which is a site that contains a lot of interaction experimentation, and in some aspects may go a bit over board. I found the button hover states the most appealing as it succeeds in indication that the element can be interacted with via a non-jarring shape change as opposed to color changes, thus making it more accessibility friendly. The obvious con is that this is not at all a mobile-friendly solution, and it won’t work in older browsers but it seems to be a pleasant progressive enhancement.