CSS İle Sosyal Medya Butonu Oluşturma

| | 27 Şub 2013 0 yorum 

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 tıklayınız.


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

•Arkadaşlar anlatım bana konu bsahin'e aittir
Siz bu yazıyı okuyan counter kişiden birisiniz.

0 yorum: