CSS Background and Colour Transition Tutorial

At Absolute, we're currently working on building a new e-commerce jewellery website.

Affetto Jewellery to launch 2012.

Taking advantage of CSS techniques we were able to create a subtle hover transition by changing the background position and colour for the twitter link.

Have a look for yourself and see what you think.

http://www.affettojewellery.co.uk/

If you would like to re-create this effect, please find the HTML and CSS code below along with a link to a DEMO on jsFiddle.

If you have any questions, feel free to add us on twitter: @absoluteagency

Have fun :)

HTML:

Follow us on Twitter

CSS:

a.twitter {
-moz-transition-duration: 0.3s, 0.3s;
-moz-transition-property: color, background;
-moz-transition-timing-function: linear, ease-in;

background: url("http://www.affettojewellery.co.uk/twitter.png") no-repeat 0 4px;
color: #000;
display: block;
font-family: Georgia, sans-serif;
font-style: italic;
padding: 0 0 0 30px;
margin: 20px;
text-decoration: none;
}

a.twitter:hover {
color: #eb1a67;
background-position: 0 -18px;
}

DEMO: CSS Background and Colour Transition Tutorial on jsFiddle