Flat buttons linear lengthen

This series of flat buttons makes use of a few CSS3 properties to enhance clickability and create delight.

It is important to note that a majority of the button's traits (border, background color, animation) are applied to a pseudo before element rather than the button itself. This is done so that the animation pulls the button's background wide--rather than also stretching the text.

This resting color palette was gleaned from sources across the web. The darkened text colors were selected by taking the original colors down two major hex steps (f->d, a->8, 4->2) and then adjusting for preference.

Inspired from http://couleecreative.com/