Buton Elementini Stillendirmek

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.

bt-green

CSS sprite ve sliding doors (kayan kapılar) tekniklerini kullanarak tek görselle stillendirmeyi yaptım. IE’de butonun aktif ve fare üzerindeykenki durumlarında görselin geri kalanının da görünmemesi için sprite içindeki görseller arasında bir miktar boşluk bıraktım. filament group, bu boşluğun minimum 20px olması gerektiğini söylüyor. Ben IE6 ile fazla ilgilenmediğim için pek bir fark göremedim ama bir fark olmalı gene de. Bu yöntem aynı stile sahip buttonları tek stil ve tek görselle birden fazla kullanma olanağı sağlar.  HTML yapısı oldukça basit.

HTML Yapısı

Görselin hem sağ hem de sol kısımları için buton elementinin içinde span bulunuyor. Butonun yeşil renkli olduğu için ona “bt-green” sınıfını atadım.

<button class="bt-green"><span>Gönder</span></button>

CSS

/*--- Zorunlu ---*/
button {
  overflow:visible; /* IE'de ekstra padding'i siler */
  border:0;
  cursor:pointer;
  position:relative;
}

button::-moz-focus-inner { /* Firefox'da ekstra padding'i engeller */
  border: none;
  padding:0
}

button span {
  position:relative;
  display:block;
  cursor:pointer; /* IE'de 'işaretçi' göstergesini göstermeye zorlar */
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  /* Safari ve Google Chrome - margin düzenlemesi */
  button span {
    margin-top: -1px;
  }
}

/*--- İsteğe bağlı ---*/
button:focus {
  outline: 0; /* Tıklandığında çizgilerin çıkmasını engeller */
}

.bt-green {
  height:42px;
  padding:0 15px 0 0;
  background:url(../images/bt-green.png) right -186px no-repeat;
  font-size:14px;
}

.bt-green span {
  height:42px;
  line-height:42px;
  padding:0 0 0 15px;
  background:url(../images/bt-green.png) left top no-repeat;
  text-align:center;
  font-size:14px;
  font-weight:700;
  color:#fff;
}

.bt-green.hover {
  background-position:right -248px;
}

.bt-green.hover span {
  background-position:left -62px;
}

.bt-green.active {
  background-position:right -310px;

  /* IE8'de tıklandığındaki arkaplan sapmasını engeller */
  -ms-background-position-y: -309px;
  left:1px9;
  /* IE6 ve IE7'de bir üstteki kodu çiğneyerek normal hale getirir */
  *left:0;
}

.bt-green.active span {
  background-position:left -124px;
  /* IE8'de tıklandığındaki arkaplan sapmasını engeller */
  left:-1px9;
  /* IE6 ve IE7'de bir üstteki kodu çiğneyerek normal hale getirir */
  *left:0;
}

Butonun kendisi ve fare üzerine geldiği durumu IE7+, Firefox 3.6, Opera 10.63, Chrome 7 ve Safari 5‘de denendi ve çalışıyor. Ama iş tıklandığı zamana yani “aktif” duruma gelince fark ettiğiniz gibi bir miktar karışıyor. IE’ye üstteki gibi bir çözüm buldum. Ama Opera’da tıklandığında birer piksel sağ-alta hareket oluyor. Opera’ya özel bir CSS olmadığı ve bunun için javascript kullanmak istemediğim için onu öyle bıraktım. Tabi bu konuda bir bilgisi olan varsa, fikirlerini bekliyorum.

bt-gonder

JS

Farenin butonun üzerinde olduğu ve tıklandığı durumları her tarayıcı desteklemediği için jQuery kütüphanesinden faydalanarak; fare üzerine geldiği zaman “hover”, tıklandığı zaman da “active” sınıfını ekleyen bir kod yazdım. Eğer “eski tarayıcılar beni ilgilendirmiyor” diyorsanız, bu sınıfları button.css dosyası içinden “:hover” ve “:active” olarak değiştirip javascript kodlarını tamamen silebilirsiniz.

jQuery(document).ready(function(){
  $(".bt-green").hover(function(){

    /* Üzerine geldiğinde 'hover' sınıfını ekler */
    $(this).addClass("hover");

  },function(){

    /* Üzerinden çıktığında 'hover' sınıfını siler */
    $(this).removeClass("hover");

    /* Tıkladığında 'active' sınıfını ekler tıklamayı bıraktığında 'active' sınıfını siler */
  }).bind("mousedown mouseup", function(){
    $(this).removeClass("hover").toggleClass("active");
  });
});

Örnek

İlgili Bağlantılar

Güncellendi: Opera’da karşılaştığım sorunlar ve fazladan “CSS hack” kullanılması nedeniyle bu güncellemeyi yapma gerekliliği hissettim. Bu yöntemde fazladan bir HTML elementi daha kullanıldı, ama hemen hemen hiç “CSS hack” bulunmuyor. Bu yazıyı farklı bir yöntem olduğu için silmedim. Diğer yazıya buradan ulaşabilirsiniz.