socialprofil
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>

 


Ali senin düşüncelerini merak ediyor. Bir yorum yaz

  1. hasan dedi ki:

    tek kelimeyle harikasınız. bide site hızlnadırıcı olsa fisek gibi girse iyi olue.
    spped