Bu gün sizlere değişik türlerden bir kaç tane animasyonlu buton örneği hazırlamayı düşünüyordum aslında. Nerden aklıma estiyse artık böyle bir örnek paylaşmaya karar verdim. Facebook, Google+, Youtube ve Twitter butonlarının olduğu bir örnek. Her sosyal ağ adresinin rengi farklı olduğu için her butonun arkaplan rengi, yazı rengi ve hover sonrası renkleri farklı olması gerekiyordu. Bu yüzdenkodlar baya bi uzadı diye düşünüyorum. Aslında bir yandan iyi gibi oldu. Font Awesome ikonik fontları kullandığım için kolaylıkla kendi sitenize uygun ikonları ekleyebilirsiniz. Bu yüzden butonları websitenizde yan menü olarak ta kullanabilirsiniz. Tek yapmanız gereken ikonları değiştirmek ve sitenize uyan renktei butonu kullanmak. Yada kendi sitenize göre farklı renkler ekleyip sitenize daha da uygun hale getirebilirsiniz.
Kullanım
- Head etiketleri arasına eklemeniz gereken bölüm.
Css :
<style> .container { width:500px; height:400px; margin: 200px auto; padding:20px; display:block; } li.facebook { width:200px; height:40px; background-color:#FFF; border-radius:40px; padding:10px 10px 0px 0px; text-align:center; list-style:none; float:left; margin:0.5%; -webkit-transition:0.3s; -moz-transition:0.3s; -ms-transition:0.3s; -o-transition:0.3s; transition:0.3s; } li.facebook:hover { background-color:#000033; } li.facebook a { color:#000033; font-family:Georgia, "Times New Roman", Times, serif; font-weight:bolder; font-size:25px; text-decoration:none; } li.facebook:hover a{ color:#fff; } li.facebook span { color:white; width:50px; height:40px; background-color:#000033; margin-left: -1px; margin-top: -10px; border-radius:40px; padding-top:10px; font-size:30px; text-decoration:none; text-align:center; float:left; } li.facebook:hover span { color:#000033; background-color:#FFFFFF; } /* twitter */ li.twitter { width:200px; height:40px; background-color:#FFFFFF; border-radius:40px; padding:10px 10px 0px 0px; text-align:center; float:left; list-style:none; margin:0.5%; -webkit-transition:0.3s; -moz-transition:0.3s; -ms-transition:0.3s; -o-transition:0.3s; transition:0.3s; } li.twitter:hover { background-color:#00CCFF; } li.twitter a { color:#00CCFF; font-family:Georgia, "Times New Roman", Times, serif; font-weight:bolder; font-size:25px; text-decoration:none; } li.twitter:hover a{ color:#fff; } li.twitter span { color:white; width:50px; height:40px; background-color:#00CCFF; margin-left: -1px; margin-top: -10px; border-radius:40px; padding-top:10px; font-size:30px; text-decoration:none; text-align:center; float:left; } li.twitter:hover span { color:#00CCFF; background-color:#FFFFFF; } /* google */ li.google { width:200px; height:40px; background-color:#FFF; border-radius:40px; padding:10px 10px 0px 0px; text-align:center; float:left; list-style:none; margin:0.5%; -webkit-transition:0.3s; -moz-transition:0.3s; -ms-transition:0.3s; -o-transition:0.3s; transition:0.3s; } li.google:hover { background-color:#FF0000; } li.google a { color:#FF0000; font-family:Georgia, "Times New Roman", Times, serif; font-weight:bolder; font-size:25px; text-decoration:none; } li.google:hover a{ color:#fff; } li.google span { color:white; width:50px; height:40px; background-color:#FF0000; margin-left: -1px; margin-top: -10px; border-radius:40px; padding-top:10px; font-size:30px; text-decoration:none; text-align:center; float:left; } li.google:hover span { color:#FF0000; background-color:#FFFFFF; } </style>
- Body etiketleri arasına eklemeniz gereken bölüm.
Html :
<div class="container"> <li class="facebook"><span><i class="fa fa-facebook"></i></span><a href="https://www.mintik.com/2013/11/28/css3-sosyal-ag-butonlari/">Facebook</a></li> <li class="twitter"><span><i class="fa fa-twitter"></i></span><a href="https://www.mintik.com/2013/11/28/css3-sosyal-ag-butonlari/">Twitter</a></li> <li class="google"><span><i class="fa fa-google-plus"></i></span><a href="https://www.mintik.com/2013/11/28/css3-sosyal-ag-butonlari/">Google+</a></li> <li class="google"><span><i class="fa fa-youtube"></i></span><a href="https://www.mintik.com/2013/11/28/css3-sosyal-ag-butonlari/">Youtube</a></li> </div>
tek kelimeyle harikasınız. bide site hızlnadırıcı olsa fisek gibi girse iyi olue.
spped