Sosyal Ağlar Çalışması CSS Html

[Hatake]

Demo: http://codepen.io/anon/pen/qNQABL

Ufak bir çalışmadır. Her yere tam oturmaz. Ona göre temanıza yerleştirin. Geniş bir alana koyun. Butonların üzerine geldiğinizde ve üzerine bastığınızda efektler vardır. Umarım işinize yarar.
CSS:

Kod: Tümünü Seç Tümünü Kopyala

#sosyal ul {
 padding: 0px;
 margin: 0px;
}
#sosyal ul li {
   background: url(http://i.hizliresim.com/J3raGB.png);
 display: inline-block;
 width: 117px;
 height: 17px;
 padding: 3px 0px 3px 35px;
 font-family: Tahoma;
 font-size: 13px;
 line-height: 18px;
 text-shadow: 0px 1px 2px rgba(0,0,0,0.5);
}
#sosyal ul li.facebook {
 background-position: -154px 0px !important;
}
#sosyal ul li.twitter {
 background-position: -462px 0px !important;
}
#sosyal ul li.gplus {
 background-position: 0px 0px !important;
}
#sosyal ul li.linkedin {
 background-position: -616px 0px !important;
}
#sosyal ul li.facebook:hover {
 background-position: -154px -26px !important;
}
#sosyal ul li.twitter:hover {
 background-position: -462px -26px !important;
}
#sosyal ul li.gplus:hover {
 background-position: 0px -26px !important;
}
#sosyal ul li.linkedin:hover {
 background-position: -616px -26px !important;
}
#sosyal ul li.facebook:active {
 background-position: -154px -52px !important;
}
#sosyal ul li.twitter:active {
 background-position: -462px -52px !important;
}
#sosyal ul li.gplus:active {
 background-position: 0px -52px !important;
}
#sosyal ul li.linkedin:active {
 background-position: -616px -52px !important;
}
#sosyal ul li a {
 color: #fff;
 text-decoration: none;
}

HTML:

Kod: Tümünü Seç Tümünü Kopyala

<div id="sosyal">
<ul>
<li class="facebook"><a href="#">Facebook'da biz!</a></li>
<li class="twitter"><a href="#">Twitter'da biz!</a></li>
<li class="gplus"><a href="#">Google'da biz!</a></li>
<li class="linkedin"><a href="#">LinkedIn'da biz!</a></li>
</ul>
</div>