Yavaşça soluklaşan sosyal medya butonları

Yavaşça

Font  Awasome  ve Css3 kullanarak hazırladığım basit  bir menü  örneği.  Bu  örnekle ile  webesitenizin herhangi bir köşesindesosyal  ağ adreslerinizi  paylaşabilirsiniz.

Mouse  ile  butonlar  üzerinde  gezdiğinizde jquery fade  benzeri bir  şekilde butonların arkaplanında  bulunan beyaz renk maviye dönüşüyor ve  sosyal  ağ ikonuda  beyaz  oluyor.  Mouseyi geri çektiğinizde  yine  aynı şekilde  eski haline  dönüyor.

Kullandığım arkaplan desenine  uygun olsun diye  mavi ve beyaz  renkler kullandım  normalde  ilk  hazırladığım örnek siyah ve beyaz renklerden oluşuyordu.  Kendi  sitenizin rengine göre uyarlamak  size kalmış :)

Destekleyen tarayıcılar : Cherome, Safari, Mozilla, Opera, IE

Kullanım

  • Head etiketleri arasına eklemeniz gereken bölümler.

Font Awasome adresi : 

<link href="http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css" rel="stylesheet">

 Css : 

#daire {
    width:400px;
	height:60px;
	margin: 0 auto;
	margin-top:100px;
	padding-top:5px;
}

#daire li {
	width:50px;
	height:50px;
	float:left;
	list-style:none;
	padding-left:5px;
}

#daire li a {
	width:50px;
	height:50px;
	float:left;
	list-style:none;
	color:#33CCCC;
	background-color:#fff;
	margin-left:2px;
	list-style:none;
	border-radius: 50%;
    border: solid 1px #000;
	font-size: 40px;
    line-height: 50px;
    text-align: center;	
	text-decoration:none;
	-webkit-transition: 1s linear;
	-moz-transition: 1s linear;
	-ms-transition: 1s linear;
	-o-transition: 1s linear;
	transition: 1s linear;

}  
#daire li a:hover {
	width:50px;
	height:50px;
	float:left;
	list-style:none;
	color:#fff;
	background-color:#33CCCC;
	margin-left:2px;
	list-style:none;	
	border-radius: 50%;
    border: solid 1px #000;
	font-size: 40px;
    line-height: 50px;
    text-align: center;
	text-decoration:none;
	-webkit-transition: 1s linear;
	-moz-transition: 1s linear;
	-ms-transition: 1s linear;
	-o-transition: 1s linear;
	transition: 1s linear;	
}
  •  Body  etiketleri  arasına eklemeniz gereken bölüm.

Html : 

<div id="daire">
<li> <a class="icon-facebook" href="#"></a></li>
<li> <a class="icon-linkedin" href="#"></a></li>
<li> <a class="icon-twitter" href="#"></a></li>
<li> <a class="icon-google-plus" href="#"></a></li>
<li> <a class="icon-pinterest" href="#"></a></li>
<li> <a class="icon-github" href="#"></a></li>
<li> <a class="icon-html5" href="#"></a></li>
</div>

 

Ali
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2021-07-02 tarihinde yayınlandı,Toplam 2060 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(Yorum yapılmamış)
Yükleniyor...