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

Download

Demo

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>