Özel Geçiş (Toggle) Anahtarı

Tarayıcıların standart onay kutusu (checkbox) görünümünü, son derece modern ve estetik bir geçiş anahtarı (toggle switch) ile değiştiren kullanışlı bir snippet örneğidir. CSS’in sözde elemanları (pseudo-elements) ve :checked sözde sınıfı (pseudo-class) yardımıyla hiçbir JavaScript koduna gerek kalmadan pürüzsüz ve göz alıcı bir animasyon elde edilmiştir.

Kod

<label class="custom-toggle">
  <input type="checkbox" class="custom-toggle-input" aria-label="Toggle Switch" />
  <span class="custom-toggle-slider"></span>
</label>

/* Toggle Anahtarının Kapsayıcısı */
.custom-toggle {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Varsayılan Checkbox'ı Gizle */
.custom-toggle-input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* Kaydırıcının Arka Planı */
.custom-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #e2e8f0;
  transition: background-color 0.4s;
  border-radius: 34px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Kaydırıcının Düğme (Thumb) Kısmı */
.custom-toggle-slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* İşaretlendiğinde Arka Plan Rengi */
.custom-toggle-input:checked + .custom-toggle-slider {
  background-color: #3b82f6;
}

/* Klavye Odaklandığında Dış Hat (Outline) */
.custom-toggle-input:focus-visible + .custom-toggle-slider {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* İşaretlendiğinde Düğmenin Hareketi */
.custom-toggle-input:checked + .custom-toggle-slider:before {
  transform: translateX(26px);
}

Uygulama İpuçları

Standart <input type="checkbox"> etiketlerinin görünümü tarayıcıdan tarayıcıya farklılık gösterdiği gibi CSS ile tasarımsal olarak özelleştirilebilme imkânı da oldukça kısıtlıdır. Bu durumun üstesinden gelmek amacıyla, onay kutusunun kendisi ekranda görünmez hale getirilmiş ve hemen yanındaki <span> (kaydırıcı) elemanı üzerinden özel bir arayüz tasarlanmıştır.

1. Onay Kutusunu (Checkbox) Gizleme: Temel HTML işlevi korunurken, elemana opacity: 0, width: 0 ve height: 0 değerleri verilerek ekrandan tamamen gizlenmesi sağlanmıştır.
2. Kaydırıcıyı (Slider) Şekillendirme: Anahtarın üzerinde hareket eden dairesel düğme (thumb) kısmı, tamamen ::before sözde elemanı (pseudo-element) ile oluşturulup biçimlendirilmiştir.
3. Pürüzsüz ve Esnek Animasyon: CSS içerisindeki transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) ayarı sayesinde düğmenin her iki yöne hareketinde hafifçe sekip yerine oturduğu çok daha doğal ve tatmin edici bir geçiş (easing) efekti yaratılmıştır.
4. Erişilebilirlik (A11y) Düzenlemeleri: Klavye ile web sitesinde gezinirken odaklanılan öğenin (focus state) net bir şekilde anlaşılabilmesi için :focus-visible sözde sınıfı üzerinden şık ve belirgin bir dış hat (outline) uygulanmıştır.

Bu geçiş anahtarı, ayarlar menüleri veya aydınlık/karanlık mod geçişleri gibi anında tepki gerektiren iki durumlu (açma/kapatma) işlemlerde muazzam bir kullanıcı deneyimi sağlar.