Generator CSS Switch

Ce este acest instrument?

Un comutator toggle CSS este un checkbox stilizat să arate și să se comporte ca un comutator fizic on/off — o pistă în formă de pilulă cu un buton circular care glisează dintr-o parte în alta. Sub capotă, este în continuare un input checkbox real, ceea ce contează: păstrează controlul accesibil de la tastatură și utilizabil cu cititoare de ecran și trimiteri de formulare, spre deosebire de un comutator construit pur din div-uri clicabile.

Acest instrument construiește acel model pentru tine: un checkbox ascuns, o pistă care își schimbă culoarea în funcție de :checked și un buton glisant care se mișcă folosind un transform CSS. Ajustează sliderele și selectoarele de culoare, apasă previzualizarea pentru a testa animația reală de toggle, și copiază atât CSS-ul, cât și marcajul HTML minimal de care depinde.

Sursă: WAI-ARIA Authoring Practices, W3C — recomandă un input checkbox real ca bază accesibilă pentru un control de tip switch, motiv pentru care rezultatul acestui generator păstrează elementul de input de bază.

De ce să-l folosești?

• Previzualizarea este un toggle real, clicabil — nu o imagine statică — deci poți testa animația exactă înainte de a o folosi.
• Generează atât CSS-ul, cât și structura HTML accesibilă (input checkbox + label) de care depinde CSS-ul.
• Control complet asupra lățimii/înălțimii pistei, culorii stării off, culorii stării on, culorii butonului glisant, rotunjirii colțurilor și vitezei tranziției.
• Folosește modelul standard checkbox + selector :checked, deci toggle-ul rămâne navigabil de la tastatură și funcționează în formulare reale.
• Rulează complet în browserul tău — nimic din ce configurezi nu este încărcat nicăieri.
• Gratuit, fără înregistrare, funcționează pe mobil.

Cum se folosește

1. Setează lățimea și înălțimea pentru a dimensiona pista — butonul glisant este dimensionat automat pentru a se potrivi în interior, cu un mic spațiu.
2. Alege culoarea stării off pentru aspectul implicit (nebifat) al pistei, și culoarea stării on pentru când este comutat activ.
3. Alege o culoare pentru butonul glisant — alb sau un neutru deschis oferă de obicei cel mai puternic contrast față de pistă.
4. Setează border radius la 50% pentru un comutator clasic în formă de pilulă, sau redu-l pentru un dreptunghi ușor rotunjit în schimb.
5. Ajustează viteza tranziției pentru a controla cât de repede glisează butonul și se estompează culoarea pistei între stări.
6. Apasă toggle-ul de previzualizare pentru a confirma că animația arată bine, apoi copiază CSS-ul și HTML-ul în proiectul tău.

Exemplu

Intrare

Lățime: 52px · Înălțime: 28px · Culoare off: #cbd5e1 · Culoare on: #ea580c · Rază: 50% · Viteză: 200ms

Rezultat

.switch input:checked ~ .track { background-color: #ea580c; }
.switch input:checked ~ .track .thumb { transform: translateX(24px); }

Miezul modelului: starea :checked a checkbox-ului, combinată cu selectorul general de frate (~), controlează atât culoarea de fundal a pistei, cât și distanța de glisare a butonului.

De ce un checkbox în loc de un div cu un handler de clic

Este tentant să construiești un toggle din două elemente <div> și puțin JavaScript care schimbă o clasă la clic, dar acea abordare de obicei strică navigarea cu tastatura, anunțurile cititoarelor de ecran și trimiterea formularelor — un checkbox real gestionează toate trei gratuit. Modelul generat de acest instrument păstrează <input type="checkbox"> ca elementul interactiv real (ascuns vizual, dar în continuare focusabil), și folosește CSS pur — deloc JavaScript — pentru a stiliza pista și butonul glisant, pe baza stării native :checked a checkbox-ului.

Stiluri comune de comutator

• Comutator pilulă clasic: rotunjire de colț la 50%, dimensiune moderată (48–56px lățime), o schimbare clară de culoare între on/off.
• Comutator pentru panou de setări: dimensiune mai mică (36–44px lățime), culoare off atenuată (gri deschis) contra unei stări on colorate de brand.
• Comutator ușor rotunjit: rotunjire de colț în jur de 20–30%, în loc de o pilulă completă, pentru un aspect mai dreptunghiular, tip aplicație.
• Comutator rapid, sprinten: viteza tranziției la 100–150ms se simte imediată și receptivă.
• Comutator lent, deliberat: viteza tranziției la 300–400ms se citește mai fluid și mai finisat, util pentru un singur toggle de setări proeminent.

Combinarea cu alte instrumente CSS

Pista și butonul glisant generate folosesc deja border-radius sub capotă, deci dacă vrei o variantă pătrată sau rotunjită diferit față de ce oferă sliderul, Generatorul Border Radius îți permite să reglezi fin fiecare colț independent, înainte de a lipi valoarea. Generatorul Box Shadow este util pentru a adăuga o umbră subtilă butonului glisant, pentru profunzime suplimentară.

→ Generator Border Radius · Generator Box Shadow

Întrebări frecvente