Generator CSS prekidača

Prilagodite kontrole da dizajnirate toggle prekidač, kliknite na živi pregled da vidite animaciju, zatim kopirajte gotov HTML i CSS. Postavite širinu, visinu, boje trake za isključeno/uključeno stanje, boju klizača, zaobljenost kutova i brzinu prijelaza — izlaz je standardni pristupačan toggle temeljen na checkboxu, a ne samo dekorativni oblik.

Što je ovaj alat?

CSS toggle prekidač je checkbox stiliziran da izgleda i ponaša se poput fizičkog on/off prekidača — traka u obliku tabletice s okruglim klizačem koji klizi s jedne strane na drugu. Ispod haube i dalje je pravi checkbox input, što je važno: to čuva kontrolu dostupnom putem tipkovnice i upotrebljivom sa čitačima ekrana i pri slanju formi, za razliku od prekidača izgrađenog isključivo od klikabilnih divova.

Ovaj alat gradi taj obrazac za vas: skriveni checkbox, traku koja mijenja boju na temelju :checked, i klizač koji se pomiče CSS transformom. Prilagodite klizače i birače boja, kliknite pregled da testirate stvarnu animaciju prekidača, i kopirajte i CSS i minimalni HTML markup o kojem ovisi.

Izvor: WAI-ARIA Authoring Practices, W3C — preporučuje pravi checkbox input kao pristupačnu osnovu za kontrolu prekidača, zbog čega izlaz ovog generatora čuva temeljni input element.

Zašto ga koristiti?

Pregled je pravi, klikabilni prekidač — ne statična slika — pa možete testirati točnu animaciju prije upotrebe.
Izlaz sadrži i CSS i pristupačnu HTML strukturu (checkbox input + label) o kojoj CSS ovisi.
Puna kontrola nad širinom/visinom trake, bojom isključenog stanja, bojom uključenog stanja, bojom klizača, zaobljenošću kutova i brzinom prijelaza.
Koristi standardni obrazac checkbox + :checked selektor, pa prekidač ostaje dostupan tipkovnicom i radi unutar pravih formi.
Radi u potpunosti u vašem pregledniku — ništa što konfigurirate ne šalje se nikamo.
Besplatno, bez registracije, radi na mobitelu.

Kako ga koristiti

Postavite širinu i visinu za veličinu trake — klizač se automatski veličinom prilagođava da stane unutra s malim razmakom.
Odaberite boju za zadano (isključeno) stanje trake i boju za stanje kad je uključen.
Odaberite boju klizača — bijela ili svijetla neutralna boja obično daje najjači kontrast s trakom.
Postavite border radius na 50% za klasičan oblik tabletice, ili smanjite za blago zaobljeni pravokutnik.
Prilagodite brzinu prijelaza da kontrolirate koliko brzo klizač klizi i koliko brzo boja trake prelazi između stanja.
Kliknite prekidač u pregledu da potvrdite da animacija izgleda dobro, zatim kopirajte CSS i HTML u svoj projekt.

Primjer

Ulaz

Širina: 52px · Visina: 28px · Boja isključeno: #cbd5e1 · Boja uključeno: #ea580c · Radius: 50% · Brzina: 200ms

Izlaz

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

Srž obrasca: stanje :checked checkboxa, u kombinaciji sa selektorom općeg susjeda (~), pokreće i boju pozadine trake i udaljenost klizanja klizača.

Zašto checkbox umjesto diva s click handlerom

Primamljivo je izgraditi prekidač od dva <div> elementa i malo JavaScripta koji zamjenjuje klasu na klik, ali taj pristup obično lomi navigaciju tipkovnicom, najave čitača ekrana i slanje formi — pravi checkbox sve to riješi besplatno. Obrazac koji ovaj alat generira zadržava <input type="checkbox"> kao stvarni interaktivni element (vizualno skriven, ali i dalje fokusibilan), i koristi čisti CSS — bez ikakvog JavaScripta — za stiliziranje trake i klizača na temelju izvornog stanja :checked checkboxa.

Uobičajeni stilovi prekidača

Klasičan prekidač u obliku tabletice: border radius na 50%, umjerena veličina (48–56px širine), jasna promjena boje između uključeno/isključeno.
Prekidač za postavke: manja veličina (36–44px širine), prigušena boja isključenog stanja (svijetlo siva) uz boju branda za uključeno stanje.
Blago zaobljeni prekidač: border radius oko 20–30% umjesto pune tabletice, za pravokutniji izgled sličniji aplikaciji.
Brz, oštar prekidač: brzina prijelaza 100–150ms djeluje trenutno i odzivno.
Spor, promišljen prekidač: brzina prijelaza 300–400ms djeluje glađe i uglađenije, korisno za jedan istaknuti prekidač postavki.

Kombiniranje s drugim CSS alatima

Generirana traka i klizač već koriste border-radius ispod haube, pa ako želite kvadratnu ili drukčije zaobljenu varijantu izvan onoga što nudi klizač, Border Radius Generator omogućuje fino podešavanje svakog kuta zasebno prije nego što vrijednost zalijepite. Box Shadow Generator koristan je za dodavanje suptilne sjene klizaču radi dodatne dubine.

→ Generator border-radius · Generator box-shadow

Često postavljana pitanja

Zašto izlaz uključuje HTML, a ne samo CSS?

Toggle prekidač nije samo vizualan — ovisi o pravom <input type="checkbox"> omotanom u <label>, plus elementima trake i klizača koje CSS cilja. Bez te točne strukture, selektori temeljeni na :checked u generiranom CSS-u nemaju na što se zakačiti, pa se oba dijela kopiraju zajedno.

Je li ovaj prekidač pristupačan?

Da — jer je interaktivni element pravi checkbox (samo vizualno skriven tehnikom koja ga zadržava u stablu pristupačnosti, ne display:none), ostaje fokusibilan Tabom, prebacivanje radi razmaknicom ili Enterom, i čitači ekrana ga ispravno najavljuju kao checkbox u trenutnom označenom/neoznačenom stanju.

Mogu li ovo koristiti unutar prave HTML forme?

Da. Budući da je temeljni element standardni checkbox input, možete mu dodati atribute name i value i on će se slati kao svaki drugi checkbox — uključeni prekidači šalju svoju vrijednost, isključeni se izostavljaju, potpuno kao kod običnog checkboxa.

Zašto se klizač pomiče pomoću transform umjesto mijenjanja pozicije left?

Animiranje transform: translateX() obrađuje kompozitor preglednika i ostaje glatko čak i na slabijim uređajima, dok animiranje left izaziva ponovni izračun layouta svaki frame. Generirani CSS zbog toga uvijek koristi transform za pokret klizanja.

Što točno kontrolira klizač border radiusa?

Skalira zaobljenost kutova i trake i klizača zajedno, proporcionalno visini trake. Na 50% dobivate potpuno zaobljenu tabletu s okruglim klizačem; niže vrijednosti drže oblik pravokutnijim, za kvadratniji izgled u stilu aplikacije.