saf buton

Web siteleriniz için kolaylıkla özelleştirip  kullanabileceğiniz  buton örneği.  Sazzad Hossain tarafından hazırlanmış  olan bu  butonlar  3 farklı  renkten oluşuyor. Dilerseniz  farklı  farklı  renklerden oluşan bir menü örneği olarak  ta kullanabilirsiniz.  Butonlar tıklandığı  zaman içe  doğru batmasada  mouse  hareketleri sonucu renk değişimleri  sırasında  içe batıyormuş gibi görülebiliyor.

 

Kullanım

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

Css : 

.hot-container p { margin-top: 10px; }
a { text-decoration: none; margin: 0 10px; }

.hot-container {
	min-height: 100px;
	margin-top: 100px;
	width: 100%;
	text-align: center;
}

a.btn {
	display: inline-block;
	color: #666;
	background-color: #eee;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 12px;
	padding: 10px 30px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border: 1px solid rgba(0,0,0,0.3);
	border-bottom-width: 3px;
}

	a.btn:hover {
		background-color: #e3e3e3;
		border-color: rgba(0,0,0,0.5);
	}

	a.btn:active {
		background-color: #CCC;
		border-color: rgba(0,0,0,0.9);
	}

/* blue button */

a.btn.btn-blue {
	background-color: #699DB6;
	border-color: rgba(0,0,0,0.3);
	text-shadow: 0 1px 0 rgba(0,0,0,0.5);
	color: #FFF;
}

	a.btn.btn-blue:hover {
		background-color: #4F87A2;
		border-color: rgba(0,0,0,0.5);
	}

	a.btn.btn-blue:active {
		background-color: #3C677B;
		border-color: rgba(0,0,0,0.9);
	}

/* red button */

a.btn.btn-red {
	background-color: #E48681;
	border-color: rgba(0,0,0,0.3);
	text-shadow: 0 1px 0 rgba(0,0,0,0.5);
	color: #FFF;
}

	a.btn.btn-red:hover {
		background-color: #DA4F49;
		border-color: rgba(0,0,0,0.5);
	}

	a.btn.btn-red:active {
		background-color: #B32C24;
		border-color: rgba(0,0,0,0.9);
	}
  •  Body etiketleri arasına eklemeniz gereken bölüm.

Html : 

<div class="hot-container">
	<p>
		<a href="#" class="btn">This is a button</a>
		<a href="#" class="btn btn-blue">This is a button</a>
	</p>
	<p>
		<a href="#" class="btn btn-red">This is a button</a>
		<a href="#" class="btn btn-green">This is a button</a>
	</p>
</div>

 


Ali senin düşüncelerini merak ediyor. Bir yorum yaz