CSS3 ile Dinamik Button Oluşturma

CSS3 ile gelen kenar yuvarlama, kutu gölgeleme fonksiyonları web uygulamalarında bir çok kolaylık sağlıyor. Bunlardan biride tabiki button oluşturmak.



Yukarıdaki gibi dinamik ve görsel efekleri olan dinamik button oluşturmak için ana css içinde şöyle bir sınıf oluşturmalıyız.

.btn {
display: inline-block;
background: url(btn.bg.png) repeat-x 0px 0px;
padding:5px 10px 6px 10px;
font-weight:bold;
text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
border:1px solid rgba(0,0,0,0.4);
-moz-border-radius: 5px;
-moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
-webkit-border-radius: 5px;
-webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
}

Ardından eğer değişik renlerle (mavi, yeşil, kırmızı) çeşitlendirmek istiyorsak

.blue {background-color: #CCCCCC; color: #141414;}
.blue:hover {background-color: #00c0ff; color: #ffffff;}

.green {background-color: #CCCCCC; color: #141414;}
.green:hover {background-color: #8aff00; color: #ffffff;}

.red {background-color: #CCCCCC; color: #141414;}
.red:hover {background-color: #ff004e; color: #ffffff;}

Önemli Uyarı: Kenar yuvarlama halen IE8'de çalışmıyor. Diğer web tarayıcılar için (Firefox, Chrome, Safari) sorunsuz kullanılabiliyor.

Orjinal Makaleden Alıntıdır.