<label class="sw"><input type="checkbox" checked><span class="track"></span><span class="txt">Wi-Fi</span></label>About this button
An on/off switch built from a hidden checkbox and a sibling track, with the :checked state doing all the work.
How it works
A visually hidden checkbox stores the on or off state, and the label around it makes the whole control clickable. A sibling span draws the track, and its ::after pseudo-element is the knob. The :checked selector recolours the track and slides the knob with translateX, so the switch needs no script at all.
Ways to customise it
- Change #22c55e to set the colour of the on state.
- Widen the track and move the knob by the track width minus the knob width and its gap.
- Swap the cubic-bezier easing for linear if you want a calmer slide.
Good to know
The input is shrunk to one pixel instead of removed with display: none, so it stays reachable with the keyboard and announced by screen readers. The focus ring is drawn on the track. It works in every current browser.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.