Basit buton tasarımları

Basit

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
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2021-06-23 tarihinde yayınlandı,Toplam 1796 karakterden oluşmaktadır.
Yeniden yazdırma ipuçları:Özel talimatlar dışında, bu sitedeki tüm makaleler CC-4.0 sözleşmesi kapsamında yayınlanmaktadır.Yeniden basılması için lütfen kaynak belirtiniz.
Yorum yap(Yorum yapılmamış)
Yükleniyor...