Yavaşça soluklaşan sosyal medya butonları

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="https://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>