Onur SELAMET

Geliştirdiğim websitelerinde -eğer tasarım dahilinde bir seçim yoksa- standart butonların yerine kullandığım bir css sınıfından bahsetmek istiyorum. Öncelikle standart buton'u gösterelim Şimdi bu butona arkaplan rengi,font rengi ekleyip yazıtipini değiştirelim

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

Kenarlıklar ekleyip sağ ve soldan boşluk bırakalım

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 uygulayalım

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 kullanacağınız html kodu

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

Bu yazının kaynağı olan http://www.webreference.com/programming/css_stylish/ adresindeki yazıda kenarlıklara hover efekti vermek ile ilgili kısım da mevcut ancak her buton için javascript methodunu set etmek gerektiğinden ve butonları modifiye etmek için harcanan zamana değmeyeceğinden pek kullanmadım şu güne kadar. Umarım işinize yarayan bir bilgi olmuştur.