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.
