← All elements
<label class="switch">
<input type="checkbox" checked/>
<div class="indicator left"></div>
<div class="indicator right"></div>
<div class="button"></div>
</label>About this button
A large, deep toggle with an orange gradient track and a rounded knob. A checkbox drives the slide, the glow and the inset shadows.
How it works
A hidden checkbox drives a large pill. Custom properties set the width, hue and timing, and inset shadows make the track look carved. The knob and two indicator lamps slide and change colour using the checked state of the input.
Ways to customise it
- Change --hue and --accent-hue for another colour scheme.
- Edit --width to resize the whole switch.
- Change --duration for a faster slide.
Good to know
Because it is a real checkbox inside a label, it works with the keyboard and screen readers. Add visible text if the on and off meaning is not clear from context.
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.