Buton elementini stillendirmek çoğu zaman sıkıntılı olmuştur. Çünkü bu element her tarayıcıda farklı farklı taranıyor. Bunu stillendirmek için birkaç yöntem var, ama her birinin kendi içinde sınırları var. Kullanılabilecek yöntemler şöyle:
- Arkaplan görseli (background-image) kullanmak: Bu yöntemin sınırlılığı aynı stile sahip olsa da farklı boyutlardaki faklı butonlar için farklı görseller kullanmak gerektirmesidir.
- CSS3 kullanmak: Border-radius, gradient, box-shadow gibi özellikleri kullanmak. Bu yöntem modern tarayıcılarda gayet de kullanışlıdır. Ama IE gibi hala CSS3 desteklemeyen tarayıcılar için yine de bir alternatif oluşturmayı gerektirir.
- Buton elementinin içine görsel koymak: Border ve background‘u aynı biçimde stillendirip elementin içine <img> etiketiyle görsel koymak. Bu da bizi sınırlandırır. İstediğimiz görsel zenginliği her zaman elde edemeyiz.
Şimdi göstereceğim yöntem ile hemen hemen her tarayıcıda aynı görüntüyü elde edebilirsiniz.