CSS İle Sosyal Medya Butonu Oluşturma

<div id="sosyal-medya">
	<ul>
		<a href="#"><li id="fb">FACEBOOK<div></div></li></a>
		<a href="#"><li id="tw">TWITTER<div></div></li></a>
		<a href="#"><li id="pin">PINTEREST<div></div></li></a>
		<a href="#"><li id="gplus">GOOGLE+<div></div></li></a>
		<a href="#"><li id="ins">INSTAGRAM<div></div></li></a>
		<a href="#"><li id="flickr">FLICKR<div></div></li></a>
		<a href="#"><li id="in">LINKEDIN<div></div></li></a>
		<a href="#"><li id="rss">RSS<div></div></li></a>
	</ul>
</div>

@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400, 300);
 #sosyal-medya {
    font-family:'Roboto Condensed', sans-serif;
}
#sosyal-medya ul {
    margin-left: -40px;
}
#sosyal-medya ul a {
    color: #fff;
    text-decoration: none;
}
#sosyal-medya ul a li {
    float: left;
    list-style: none;
    height: 58px;
    width: 68px;
    margin: 3px 3px 0 0;
    text-align: center;
    font-size: 12px;
    background: #2c2c2c;
    display: block;
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    transition: all .4s ease;
    padding: 9px 0 0 0;
}
#sosyal-medya ul a li div {
    background-image: url(http://bsahin.net/wp-content/uploads/2013/02/sprite-sosyal1.png);
    margin:5px 0 0 26px;
    height: 15px;
    width: 15px;
}
li#fb:hover {
    background: #38589f
}
li#tw:hover {
    background: #44b0e3
}
li#pin:hover {
    background: #cb2229
}
li#gplus:hover {
    background: #cd4132
}
li#ins:hover {
    background: #d2c3ac
}
li#flickr:hover {
    background: #ff0085
}
li#in:hover {
    background: #64b7d2
}
li#rss:hover {
    background: #f8bc2d
}
li#fb div {
    background-position: 0 0;
}
li#tw div {
    background-position: 0 -16px;
}
li#pin div {
    background-position: 0 -117px;
}
li#gplus div {
    background-position: 0 -99px;
}
li#ins div {
    background-position: 0 -64px;
}
li#flickr div {
    background-position: 0 -84px;
}
li#in div {
    background-position: 0 -49px;
}
li#rss div {
    background-position: 0 -32px;
}