CSS Toggle Switch Üretici (Açma/Kapama Düğmesi)

Nasıl çalışır?

Sol panele düğmenin yanında görünecek yazıyı girin, örneğin "Bildirimleri aç". Sağda bir <style> bloğu ve bir <label> bloğu oluşur; ikisini birlikte sayfanıza yapıştırdığınızda çalışan bir açma/kapama düğmesi elde edersiniz, JavaScript gerekmez. Kodun temelinde gerçek bir onay kutusu (checkbox) vardır: görünmez ama odaklanabilir durur, bu yüzden Sekme tuşuyla gelip boşlukla açıp kapatabilir, ekran okuyucuda "açık/kapalı" duyabilir, formu gönderdiğinizde değerini alabilirsiniz. 52 piksel genişlik seçerseniz yükseklik 30 piksel olur ve açılınca beyaz topuz 22 piksel sağa kayar; sonuç satırı bu ölçüleri yazar. Renk kutusuna kendi marka renginizi HEX olarak yazın. Özel onay kutusu stili aynı yapıyı tik işaretli bir kareye çevirir; açık renk seçerseniz tik otomatik olarak koyu çizilir ki görünür kalsın. İndir düğmesi iki durumun önizlemesini PNG olarak verir.

Bu araç css toggle switch, toggle switch css, css switch button, css checkbox generator aramalarıyla da biliniyor.

Toggle switch (açma/kapama anahtarı) nedir?

Toggle switch, bir ayarı iki durum arasında değiştiren ve telefonlardaki ayar ekranlarından tanıdığımız kaydırmalı düğmedir. HTML'de ayrı bir öğesi yoktur; bu yüzden neredeyse her zaman bir onay kutusunun CSS ile yeniden çizilmesiyle yapılır. Kullanıcı ondan değişikliğin hemen uygulanmasını bekler, ayrı bir Kaydet düğmesi beklemez.

:focus-visible nedir?

:focus-visible, bir öğe klavyeyle (ya da odak halkası gerektiren başka bir yolla) odaklandığında eşleşen CSS seçicisidir. Fareyle tıklamada çoğu tarayıcı onu eşleştirmez. Böylece klavye kullanıcısı odak halkasını görür, fare kullanıcısı tıkladığı düğmede gereksiz bir çerçeve görmez. Chrome 86, Firefox 85 ve Safari 15.4'ten beri desteklenir.

Checkbox ile toggle switch arasındaki fark nedir?

Kod düzeyinde ikisi aynı <input type="checkbox"> öğesidir; fark görünüşte ve verdikleri sözdedir. Onay kutusu bir seçimi işaretler ve genellikle formun sonunda bir düğmeyle gönderilir. Anahtar ise bir ayarı açıp kapatır ve değişikliğin hemen etkili olacağını söyler. Ekran okuyucular için anahtara role="switch" eklenir, onay kutusuna eklenmez; bu araç iki stili de bu kurala göre üretir.

Tuzak: display:none ile gizlenen checkbox klavyeden kaybolur

İnternetteki birçok örnek asıl onay kutusunu display:none ya da visibility:hidden ile gizler. Görünüşte fark yoktur, ama o anda kutu klavye sırasından ve ekran okuyucudan da silinir: fareyle tıklayan kullanıcı düğmeyi açabilir, Sekme tuşuyla gezen ya da görme engelli kullanıcı açamaz. Bu araç kutuyu opacity:0 ile ve 1 piksel boyutunda saklar; kutu görünmez olur ama erişilebilir kalır.

İkinci tuzak odak göstergesidir. outline:none yazıp hiçbir şey koymamak klavye kullanıcısını nerede olduğunu bilmez hale getirir. Üretilen kodda :focus-visible kuralı vardır: fareyle tıklayana halka görünmez, klavyeyle gelene seçtiğiniz renkte bir halka görünür.

Anahtar mı, onay kutusu mu?

İkisi aynı veriyi (açık/kapalı) tutar ama farklı söz verir:

• Ayar hemen uygulanıyorsa (karanlık mod, bildirim) → anahtar
• Seçim bir formla birlikte "Kaydet" ile gönderiliyorsa (koşulları kabul ediyorum) → onay kutusu
• Listeden birden çok madde seçiliyorsa → onay kutusu
• Mobil uygulama görünümüne benzemesi isteniyorsa → yuvarlak anahtar
• Kurumsal, keskin hatlı arayüz → köşeli anahtar

Sık sorulanlar

Bu kod JavaScript olmadan gerçekten çalışır mı?

Evet. Açma ve kapama işini tarayıcının kendi onay kutusu yapar; CSS yalnızca :checked durumuna göre rengi ve topuzun yerini değiştirir. Değer değişince bir şey yaptırmak isterseniz (ayarı kaydetmek gibi) input'a kendi JavaScript olayınızı bağlarsınız.

role="switch" ne işe yarıyor?

Ekran okuyuculara bu kutunun bir onay kutusu değil açma/kapama anahtarı olduğunu söyler; kullanıcı "seçili değil" yerine "kapalı" duyar. Özel onay kutusu stilinde bu rol eklenmez, çünkü orada öğe gerçekten bir onay kutusudur.

Aynı sayfada birden çok düğme kullanabilir miyim?

Evet. <style> bloğunu bir kez eklemeniz yeter; <label> bloğunu istediğiniz kadar kopyalayıp yazılarını değiştirin. Başlangıçta açık olması gereken düğmenin input etiketine checked yazın.

İndir düğmesi ne kaydediyor?

Kapalı ve açık durumu alt alta gösteren bir PNG önizlemesini; tasarım onayı ya da dokümantasyon için kullanışlıdır. Kodun kendisi için Çıktıyı kopyala düğmesini kullanın.