CSS3 Animated Vignette Buttons

Fade In Peer Thro' Iris

These buttons are made by styling a single anchor element with CSS3 multiple backgrounds. They use two images - a background pattern and then a semi-transparent .png 'vignette' which sits over the top. The vignette position or size is then animated using the transition property in Chrome, Safari and Firefox 4.

They fallback nicely in browsers that don't fully support the CSS3 properties in use.

For more info check out the source or this accompanying article.

A MightyMeta Tinkerage