HTML Yapısı:
CSS Yapısı:
@import url(http://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://buraksah.in/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;
}Sonuç:
Ön izleme: http://jsfiddle.net/bsahin/Cq2Sm/light/
Kaynak: http://buraksah.in/css-ile-sosyal-medya-butonu-olusturma.html