CSS İle Sosyal Medya Butonu Oluşturma

Merhaba arkadaşlar bugün sizlere Css ile Sosyal Medya Buttonu Oluşturmayı kısaca anlatacağım.Aslında anlatmak denmez sadece css ve html kod vereceğim ancak bu kodları nerye ekleyeceğinizi anlatacağım.Umarım işinize yarayacaktır.Lafımızı fazla uzatmadan konun içeriğinine geçiyorum.

•Arkadaşlar demo olarak görmek için

• 
  

   

•Arkadaşlar ilk olarak aşağıdaki kodu atarıyoruz(Ctrl+F) aradakli boşluğu silip arayınız;

]]>< /b:skin>
•Daha sonra aşağıdaki kodu aradığımız kodun önüne ekliyoruz;

@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://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; }

•Arkadaşlar HTML Kodunu Yerleşim Gadget Ekleden ekliyoruz;

<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>