CSS3 Tooltip Sosyal Medya Butonları

Her geçen gün CSS3'ün özelliklerini keşfettikçe kodlara daha çok hayran oluyorum. Mesela bugün bloguma Özgür'ün blogunda gördüğüm CSS3 Animated'ı uyguladım. (Bloga girişte soldan sağa doğru kayması.) Çokta hoşuma gitti. Eğer bir sıkıntı çıkarmaz ise bu şekilde devam edeceğim. Havalı girişler iyidir iyi :D

Konumuza dönelim bugün siz okurlarıma CSS3 Tooltip kullanılarak hazırlanmış sosyal medya butonlarını vereceğim. Eğer tooltip mantığını çözerseniz hemen her yerde kullanabilirsiniz.

HTML Kodları

<center>

  <ul style="margin: 0 auto" class="sosyal-buton" id="sosyal-cssanime">

     <li><a href="#" rel="nofollow" target="_blank" title="Facebook"><img src="http://4.bp.blogspot.com/-iL1yn4RuH78/T7Kd0GRPNeI/AAAAAAAAC_0/4edv38UA2-A/s1600/facebook.png">
    <strong>Facebook</strong></a> 
    </li>
     <li><a href="#" rel="nofollow" target="_blank" title="Twitter"><img src="http://3.bp.blogspot.com/-LgqftoheYqw/T7Kd3rmV6xI/AAAAAAAADAk/dBVNeD8mn7A/s1600/twitter.png">
    <strong>Twitter</strong></a> 
    </li>
    <li><a href="#" rel="nofollow" target="_blank" title="Google+"><img src="http://3.bp.blogspot.com/-4O2a3av0u48/T7jUo_Jvu5I/AAAAAAAADBs/O9Q-WNyBm34/s1600/googleplus.png">
    <strong>GooglePlus</strong></a> 
    </li>
 
    </ul>
</center>

CSS Kodları

/* Sosyal Butonlar */
    ul.sosyal-buton { list-style:none;margin 0auto;display:inline-block; }
    ul.sosyal-buton li { display:inline; float:left;  }
    ul.sosyal-buton li a {background-repeat:no-repeat; display:block; width:48px; height:48px; position:relative; text-decoration:none; }
   
 ul.sosyal-buton li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7); -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);}
 
    #sosyal-cssanime:hover li { opacity:0.2; }
    #sosyal-cssanime li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;-moz-transition-property: opacity; -moz-transition-duration: 500ms; }
    #sosyal-cssanime li a strong { opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; }
    #sosyal-cssanime li:hover { opacity:1; }
    #sosyal-cssanime li:hover a strong { opacity:1; top:-10px; }
    /* Sosyal Butonlar */

Butonlarımızın canlı önizlemesi için bu adresi kullanın.