CSS ile Sosyal Medya Butonları Oluşturmak

Aşağıda anlatılanları uyguladığınız zaman şu şekilde bir görünüm elde edeceksiniz.

Bu yazımda CSS ve Html kodlarını kullanarak sosyal medya butonları oluşturmayı anlatacağım.Anlatacağım dediysem öyle roman gibi uzun uzun bir anlatım beklemeyin. :)

Kodları vereceğim ve bu kodları nereye eklemeniz gerektiğinden bahsedeceğim.Zaten css ile sosyal medya butonu oluşturmak için bu kadarı yeterli olacaktır.Hemen anlatıma geçmek istiyorum.

Öncelikle aşağıdaki kodu buluyoruz.

]]>< /b:skin>

Bulduğumuz bu kodun hemen üzerine aşağıda verdiğim kodu 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; }

Bu işlemleri yaptıktan sonra aşağıda vermiş olduğum kodları gadget ekleme yöntemiyle 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>