Geçtiğimiz günlerde StumbleUpon’da yeni siteler keşfederken karşılaştığım bir makaleyi paylaşmak istedim. Bu makalede sitemizde kullanacağımız farklı renklerdeki butonları 3 dosyada nasıl toplayacağımız anlatılıyordu.

İşin Mantığı:
Yapmamız gereken şey öncelikle beyazdan griye doğru rengi kayan (gradient) bir buton oluşturmak olacak. Bunu izleyen aşama ise butona saydamlık vermek. Saydamlık vererek arkaplana koyduğumuz rengin butonun rengi gibi görünmesini sağlayacağız.

Butonumuz
Butonumuzu tasarladıktan sonra 3 parçaya böleceğiz. ilk iki parça butonun sağ ve sol başları olacak. üçüncü parça ise butonumuz ne kadar uzarsa uzasın işe yaramasını sağlayacak olan 1 piksellik orta parçayı oluşturmak olacak.

Son uygulamamız ise butona arkaplan olarak bir renk atamak ve butonu istediğimiz yerde kullanmak olacak.

HTML Kodu

<div class="btn btn1"><a href="#">Arama Butonu</a><span></span></div>

CSS Kodu

body {
	margin: 0;
	padding: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
}
.btn {
	float: left;
	clear: both;
	background: url(images/btn_sol.png) no-repeat;
	padding: 0 0 0 10px;
	margin: 5px 0;
}
.btn a{
	float: left;
	height: 40px;
	background: url(images/btn_orta.png) repeat-x left top;
	line-height: 40px;
	padding: 0 10px;
	color: #fff;
	font-size: 1em;
	text-decoration: none;
}
.btn span {
	background: url(images/btn_sag.png) no-repeat;
	float: left;
	width: 10px;
	height: 40px;
}
.btn1 { background-color: green; }
.btn2 { background-color: red; }
.btn3 { background-color: orange; }

Div ayracımıza btn ve btn1 ekleyerek butonumuzu başlattık. A ayracı ile orta kısmının yazımız kadar uzun olmasını sağladık. Span ayracını açıp kapatarak sağ taraftan butona bit komutunu verdik.

İşte bu kadar basit bir yöntemi 3 ufak png24 yada png8 dosyası ve kısa html&css kodları ile halletmemiz mümkün.

Yazının aslı Sohtanaka.com adresinde bulunmakta.