Güncelleme: Buton Elementini Stillendirmek

Güncelleme: Bu yazı 10 Kasım 2010 tarihinde yazılan Buton Elementini Stillendirmek yazısının güncellemesidir. 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.

HTML Yapısı

HTML yapısı biraz değişti. Önceki yöntemde, Opera’da üzerine tıklandığında oluşan kaymanın verdiği etkiyle arkaplan resmi bölünüyordu. Bu yöntemde ise kayma yine oluyor ama arkaplan resmi bölmeden bütün olarak kayıyor.

<button><em><span>Gönder</span></em></button>

CSS

Asıl değişikliğin olduğu yer. “Hack”lerin olduğu yerler komple gitti.

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

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

button em, button span {
  position:relative; /* IE'de tıklandığında sağ-alta hareketi engeller */
  display:block;
  cursor:pointer; /* IE'de 'işaretçi' göstergesini göstermeye zorlar */
}

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

/*--- Istege bagli ---*/

button:focus {
  outline: 0; /* Tıklandığında çizgilerin çıkmasını engeller */
}

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

.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 em {
  background-position:right -248px;
}

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

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

.bt-green.active span {
  background-position:left -124px;
}

bt-gonder

JS

Javascript kodunda herhangi bir değişiklik yok. Yine eski tarayıcıları umursamayanlar jQuery kodunu tamamen çıkarıp; “.hover”ı “:hover”, “.active” sınıfını da “:active” olarak değiştirip sadece HTML ve CSS ile bu yöntemi kullanabilirler.

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