Css3 Sosyal Medya Butonları

Merhaba arkadaşlar bu yayında sizlere Css3 sosyal medya butonlarını sunacağım. Kodu istediğiniz yere ekliyebilirsiniz ve kendinize göre düzenliyebilirsiniz. Evet koda geçelim...

Önizleme ;

• Facebook
• Twitter
• Google Plus
• YouTube
• RSS Feed

Aşağıdaki kodu istediğiniz yere ekliyebilirsiniz.

<style> /* Social Profile */ .social-profile { clear: both; margin-right: 2.8%; padding-bottom: 0.9em; } .social-profile ul { list-style: none; margin: 0; padding: 0; } .social-profile ul li { margin: 0 0 10px 10px; float: left; } .social-profile ul li a { display: block; background: url("http://n1306.hizliresim.com/1b/s/pjnyr.png") no-repeat right top; width: 34px; height: 34px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; text-indent: -99999px; } .social-profile ul li a:active { -moz-box-shadow: inset 0 0 6px #000; -webkit-box-shadow: inset 0 0 6px #000; box-shadow: inset 0 0 6px #000; } .social-profile ul li.facebook a { background-position: 0 0; } .social-profile ul li.facebook a:hover { background-position: 0 -44px; } .social-profile ul li.twitter a { background-position: -44px 0; } .social-profile ul li.twitter a:hover { background-position: -44px -44px; } .social-profile ul li.rss a { background-position: -88px 0; } .social-profile ul li.rss a:hover { background-position: -88px -44px; } .social-profile ul li.you-tube a { background-position: -132px 0; } .social-profile ul li.you-tube a:hover { background-position: -132px -44px; } .social-profile ul li.linkedin a { background-position: -176px 0; } .social-profile ul li.linkedin a:hover { background-position: -176px -44px; } .social-profile ul li.tumblr a { background-position: -220px 0; } .social-profile ul li.tumblr a:hover { background-position: -220px -44px; } .social-profile ul li.viemo a { background-position: -264px 0; } .social-profile ul li.viemo a:hover { background-position: -264px -44px; } .social-profile ul li.dribbble a { background-position: -308px 0; } .social-profile ul li.dribbble a:hover { background-position: -308px -44px; } .social-profile ul li.my-space a { background-position: -352px 0; } .social-profile ul li.my-space a:hover { background-position: -352px -44px; } .social-profile ul li.aim a { background-position: -396px 0; } .social-profile ul li.aim a:hover { background-position: -396px -44px; } .social-profile ul li.flickr a { background-position: -440px 0; } .social-profile ul li.flickr a:hover { background-position: -440px -44px; } .social-profile ul li.pinterest a { background-position: -484px 0; } .social-profile ul li.pinterest a:hover { background-position: -484px -44px; } .social-profile ul li.google-plus a { background-position: -528px 0; } .social-profile ul li.google-plus a:hover { background-position: -528px -44px; } .social-profile ul li.wordpress a { background-position: -572px 0; } .social-profile ul li.wordpress a:hover { background-position: -572px -44px; } .social-profile ul li.deviantart a { background-position: -616px 0; } .social-profile ul li.deviantart a:hover { background-position: -616px -44px; } </style><div class="social-profile"> <ul> <li class="facebook"><a href="#" title="Facebook" target="_blank">Facebook</a></li> <li class="twitter"><a href="#" title="Twitter" target="_blank">Twitter</a></li> <li class="google-plus"><a href="#" title="Google Plus" target="_blank">Google Plus</a></li> <li class="you-tube"><a href="#" title="YouTube" target="_blank">YouTube</a></li> <li class="rss"><a href="#" title="RSS Feed" target="_blank">RSS Feed</a></li> </ul> </div>

Kaynak aldığım siteye git. :)