[CSS + HTML] Iconos de redes sociales c/efecto

a.socials {
display: inline-block;
margin-right: 0;
text-align: left;
text-indent: -9999px;
}
a.socials {
background-position: left bottom !important;
height: 34px;
width: 34px;
}

a.socials:hover {
background-position: left top !important;
}

a.facebook {
background: url("http://img.webme.com/pic/d/design-adri/facebook.png") no-repeat scroll 0 0 transparent;
}
a.rss {
background: url("http://img.webme.com/pic/d/design-adri/rss.png") no-repeat scroll 0 0 transparent;
}
a.delicious {
background: url("http://img.webme.com/pic/d/design-adri/delicious.png") no-repeat scroll 0 0 transparent;
}
a.flickr {
background: url("http://img.webme.com/pic/d/design-adri/flickr.png") no-repeat scroll 0 0 transparent;
}
a.stumble {
background: url("http://img.webme.com/pic/d/design-adri/stumble.png") no-repeat scroll 0 0 transparent;
}
a.vimeo {
background: url("http://img.webme.com/pic/d/design-adri/vimeo.png") no-repeat scroll 0 0 transparent;
}
a.youtube {
background: url("http://img.webme.com/pic/d/design-adri/youtube.png") no-repeat scroll 0 0 transparent;
}
a.twitter {
background: url("http://img.webme.com/pic/d/design-adri/twitter.png") no-repeat scroll 0 0 transparent;
}
a.linkedin {
background: url("http://img.webme.com/pic/d/design-adri/linkedin.png") no-repeat scroll 0 0 transparent;
}
a.skype {
background: url("http://img.webme.com/pic/d/design-adri/skype.png") no-repeat scroll 0 0 transparent;
}
a.lastfm {
background: url("http://img.webme.com/pic/d/design-adri/lastfm.png") no-repeat scroll 0 0 transparent;
}
a.myspace {
background: url("http://img.webme.com/pic/d/design-adri/myspace.png") no-repeat scroll 0 0 transparent;
}
a.tumblr {
background: url("http://img.webme.com/pic/d/design-adri/tumblr.png") no-repeat scroll 0 0 transparent;
}
a.digg {
background: url("http://img.webme.com/pic/d/design-adri/digg.png") no-repeat scroll 0 0 transparent;
}
a.quora {
background: url("http://img.webme.com/pic/d/design-adri/quora.png") no-repeat scroll 0 0 transparent;
}
a.dribble {
background: url("http://img.webme.com/pic/d/design-adri/dribble.png") no-repeat scroll 0 0 transparent;
}
a.forrst {
background: url("http://img.webme.com/pic/d/design-adri/forrst.png") no-repeat scroll 0 0 transparent;
}
a.google {
background: url("http://img.webme.com/pic/d/design-adri/google.png") no-repeat scroll 0 0 transparent;
}
a.ember {
background: url("http://img.webme.com/pic/d/design-adri/ember.png") no-repeat scroll 0 0 transparent;
}
a.pinterest {
background: url("http://img.webme.com/pic/d/design-adri/pinterest.png") no-repeat scroll 0 0 transparent;
}
a.bookmark {
background: url("http://img.webme.com/pic/d/design-adri/bookmark.png") no-repeat scroll 0 0 transparent;
}

<a href="#" class="socials facebook" title="Facebook">facebook</a>
<a href="#" class="socials rss" title="Rss">rss</a>
<a href="#" class="socials twitter" title="Twitter">twitter</a>
<a href="#" class="socials youtube" title="Youtube">youtube</a>
<a href="#" class="socials delicious" title="Delicious">delicious</a>
<a href="#" class="socials vimeo" title="Vimeo">vimeo</a>
<a href="#" class="socials flickr" title="Flickr">flickr</a>
<a href="#" class="socials stumble" title="Stumble">stumble</a>
<a href="#" class="socials linkedin" title="Linkedin">linkedin</a>
<a href="#" class="socials skype" title="Skype">skype</a>
<a href="#" class="socials lastfm" title="Lastfm">lastfm</a>
<a href="#" class="socials myspace" title="Myspace">myspace</a>
<a href="#" class="socials tumblr" title="Tumblr">tumblr</a>
<a href="#" class="socials digg" title="Digg">digg</a>
<a href="#" class="socials quora" title="Quora">quora</a>
<a href="#" class="socials dribble" title="Dribble">dribble</a>
<a href="#" class="socials forrst" title="Forrst">forrst</a>
<a href="#" class="socials google" title="Google">google</a>
<a href="#" class="socials ember" title="Ember">ember</a>
<a href="#" class="socials pinterest" title="Pinterest">pinterest</a>