Colorful social buttons

Stephen Grace  tarafından hazırlanmış rengarenk bir Css3 menü örneği.  Bu örneğe  ne tür  bir  isim vermem gerektiği konusunda  biraz  kararsız  kaldığım doğrusu. İlk  bakışta  sosyal  ağ  siteleri için hazırlanmış bir  örnek  gibi  görünüyor  öte yandan bunu  bir menü  olarak kullanabilmek te mümkün. Ayrıca  buton  örneği de  diyebiliriz.

Demoda  her  buton için farklı  bir  sınıf  ayarlanmış ve her  sınıfa  farklı  farklı renkler  atanmış.  Butonları  çoğaltıp  her  butona  ayrı  ayrı  sınıflandırma  yapıp  gökkuşağı gibi  bir üst menü  örneği  olarak  kullanabileceğiniz  bir  örnek. Kullanımı  gayet  kolay  ve görüntüsüde   sanırım  her tür siteye uyabilecek gibi  görünüyor. Kullanacak olursanız  bile  demo üzerinde  pek  bi  değişiklik yapacağınız  zannetmiyorum.

Kullanım

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

Css : 

* {
	padding:0;
	margin:0;
	-webkit-font-smoothing: antialiased;
}
body {
	margin:0 auto;
	padding-top:25px;
	width:410px;
	background:#eee;
}
/* BUTTON STYLEZ
***************/
button {
	border:none;
	margin:0 auto;
	background-color:#ccc;
	border-radius: 4px;
	overflow:hidden;
	display:inline-block;
	box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25),
				0px 2px 4px rgba(0, 0, 0, 0.25);
}
.twitter, .dribbble, .rdio {
	float:left;
	padding:18px 26px;
	display: inline-block;
	box-shadow:inset 0px -3px 0px rgba(0, 0, 0, 0.1);
	background-image: linear-gradient(180deg, #fff 20%, #eee 100%);

	-webkit-transition: all 0.3s linear; 
	-moz-transition: all 0.3s linear; 
	-o-transition: all 0.3s linear; 
	transition: all 0.3s linear;
}
.twitter, .dribbble {
	box-shadow: 1px 0px 1px rgba(255, 255, 255, 0.9), 
	inset -1px 0px 1px rgba(0, 0, 0, 0.1);
}
/* HULLO TEXT
************/
.twitter p, .dribbble p, .rdio p {
	text-shadow: 0px 2px 0px #fff;
}
p {
	text-align: center;
	font-family: 'Futura';
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 13px;
}
a {
	text-decoration: none;
	color:#000;
}
.twitter p {
	color:#00a0d1;
}
.dribbble p {
	color:#ea4c89;
}
.rdio p {
	color:#008fd5;
}
/* HOVER STATES
*************/
.twitter:hover {
	background-image: linear-gradient(180deg, #00a0d1 0%, #0086af 100%);
	box-shadow: inset 0px -3px 0px rgba(0, 0, 0, 0.2);
}
	.twitter:hover p {
		color:#fff;
		text-shadow: 0px 2px 1px rgba(0, 0, 0, 0.3);
	}
.rdio:hover {
	background-image: linear-gradient(180deg, #0092da 0%, #0073ac 100%);
	box-shadow: inset 0px -3px 0px rgba(0, 0, 0, 0.2);
}
	.rdio:hover p {
		color:#fff;
		text-shadow: 0px 2px 1px rgba(0, 0, 0, 0.3);
	}
.dribbble:hover {
	background-image: linear-gradient(180deg, #ea4c89 0%, #ca3b72 100%);
	box-shadow: inset 0px -3px 0px rgba(0, 0, 0, 0.2);
}
	.dribbble:hover p {
		color:#fff;
		text-shadow: 0px 2px 1px rgba(0, 0, 0, 0.3);
	}

•  Body etiketleri arasına eklemeniz gereken bölüm.

Html : 

<button>
 	<a href="#"><div class="twitter">
 		<p>Twitter</p>
 	</div></a>
 	<a href="#"><div class="dribbble">
 		<p>Facebook</p>
 	</div></a>
 	<a href="#"><div class="rdio">
 		<p>Google +</p>
 	</div></a>
 </button>