Sadece  Css3  ve  iki tane küçük png  dosyası ile  hazırlanmış buton örneği. Butonlar iletişim sayfaları için hazırlanmış olsada  normal  bir menüde  dahi  kullanabilmeniz  için uygun bir örnek. Mouse  ile  tıkladığınızda butonlar  adeta içeri  batıyormuş  gibi bir efekte sahip. Uzun zamandan beridir  sitemde  kullandığım ve  pek te memnun olmadığım demo ve download  butonlarının  yerine her an bu butonları ekleyebilirim.

İnternette  pek  fazla  rastlanılmayan türden bir örnek olduğu için kullanmazsanız  bile  arşivinizde  saklamanızı  öneririm. Günlerce  bu tip bir  buton aradığım bile  olmuştur. Neyseki istediğimi şimdi  buldum diyebilirim. Sizinle  paylaşmakta  benim için sakıncası yok  sitede paylaştığım örneklerin çoğunda  olduğu  gibi  buda başkası tarafından  hazırlanmış örnek.   Kendisi bir geliştirici olan José Barcelon-Godfrey tarafından hazırlanmış bir örnektir.

Kullanım

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

Css : 

body {
	background:#72cbff;
}

.container {
    width:440px;
	height:250px;
	margin: 0 auto;
}

h1 {
	margin: 0 auto;
	color:rgba(188, 230, 255, 0.2);
	text-align:center;
	text-transform:uppercase;
	text-shadow: 1px 3px 6px #72cbff,
								0 0 0 #b5dcff,
							1px 4px 6px #72cbff;

	font-size:2.5em;

}

.button {
	position:relative;
	background-size:cover;
			 -webkit-transition:.7s;
	 -moz-transition:.7s;
	 -o-transition:.7s;
	 transition:.7s;
	height:64px;
	width:172px;
	border-radius:5px;
	box-shadow:inset 0px 0px 2px #47a0d3,

						 3px 3px 1px #e5f2ff,
						 3px 3px 1px rgba(00, 183, 242, 1),
						 3px 3px 10px #a8ffff;	
}

.button:hover {
	box-shadow:inset 0px 0px 10px #0087ad,
						 3px 3px 1px #e5f2ff,
						 3px 3px 1px #a8d5ff,
						 3px 3px 10px #a8ffff;
}

.button:active {
		 -webkit-transition:.3s;
	 -moz-transition:.3s;
	 -o-transition:.3s;
	 transition:.3s;
		top:3px;
		left:3px;
	box-shadow:inset 0px 0px 15px #47a0d3,
			0px 0px 1px #93c9ff,
			0px 0px 10px #47a0d3;

}

a .phone {
	padding:5px;
	margin-left:20px;
	margin-top:20px;
	float:left;	
	background:rgba(00, 183, 242, 1) url(img/phone-64.png);
}

a	.email {
	padding:5px;
	margin-left:20px;
	margin-top:20px;
	float:left;	
	background:rgba(00, 183, 242, 1) url(img/email-64.png);

	}

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

Html : 

<div class="container">
<h1>contact me</h1>
<a href="#"><div class="phone button"></div></a>
<a href="#"><div class="email button"></div></a>
</div>