Onur SELAMET

Gelistirdigim websitelerinde -eger tasarim dahilinde bir seçim yoksa- standart butonlarin yerine kullandigim bir css sinifindan bahsetmek istiyorum. Öncelikle standart buton''u gösterelim Simdi bu butona arkaplan rengi,font rengi ekleyip yazitipini degistirelim

input.buton{
   color:#050;
   font-family:''trebuchet ms'',helvetica,sans-serif;
   font-size:84%;
   font-weight:bold;
   background-color:#fed
}

Kenarliklar ekleyip sag ve soldan bosluk birakalim

input.buton{
   color:#050;
   font-family:''trebuchet ms'',helvetica,sans-serif;
   font-size:84%;
   font-weight:bold;
   background-color:#fed;
   border:1px solid;
   border-top-color:#696;
   border-left-color:#696;
   border-right-color:#363;
   border-bottom-color:#363;
   padding-left:5px;
   padding-right:5px;
}

Son olarak sadece Internet Explorer için geçerli olacak olan gradient efektini uygulayalim

input.buton{
   color:#050;
   font-family:''trebuchet ms'',helvetica,sans-serif;
   font-size:84%;
   font-weight:bold;
   background-color:#fed;
   border:1px solid;
   border-top-color:#696;
   border-left-color:#696;
   border-right-color:#363;
   border-bottom-color:#363;
   padding-left:5px;
   padding-right:5px;
   filter:progid:DXImageTransform.Microsoft.Gradient
      (GradientType=0,StartColorStr=''#ffffffff'',EndColorStr=''#ffeeddaa'');
}

Ve tabi ki bu butonu kullanacaginiz html kodu

<input class="buton" type="button" value="Gradient efektli sekilli buton"   />

Bu yazinin kaynagi olan http://www.webreference.com/programming/css_stylish/ adresindeki yazida kenarliklara hover efekti vermek ile ilgili kisim da mevcut ancak her buton için javascript methodunu set etmek gerektiginden ve butonlari modifiye etmek için harcanan zamana degmeyeceginden pek kullanmadim su güne kadar. Umarim isinize yarayan bir bilgi olmustur.