Social profile icons

9Okunma
1 Yorum

Social 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="http://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="http://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="http://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="http://mintik.com/2013/11/28/css3-sosyal-ag-butonlari/">Youtube</a></li>
</div>

 

Ali
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2020-08-17 tarihinde yayınlandı,Toplam 3754 karakterden oluşmaktadır.
Yeniden yazdırma ipuçları:Özel talimatlar dışında, bu sitedeki tüm makaleler CC-4.0 sözleşmesi kapsamında yayınlanmaktadır.Yeniden basılması için lütfen kaynak belirtiniz.
Yorum yap(1 Yorum)
Yükleniyor...
hasan Yorumcu LV.1
2016-11-25 22:13:49 回 Yanıtla

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