How to create an animated and stateful toggle using only CSS (no Javascript!)
I recently posted a shot on Dribbble demoing a component I worked on for a web project we’re working on internally at Guidebook. The component is a simple binary toggle, but with a caveat: it was constructed using only CSS (and HTML of course). I had some requests to show how it was done, so I’ll detail how to create your own CSS-only toggle here.

"Binary Toggle" for a web project at Guidebook. Created using only CSS and some markup.
The Markup
Let’s start with the HTML. The toggle is, at it’s core, an input checkbox. This is how we store the state of the toggle without using Javascript – the input element stores it’s checked
state internally.
The markup consists of a container label
, an input
element of type checkbox
, and some additional elements to create the toggle background and switch.
<label class="tgl">
<input type="checkbox" />
<span class="tgl_body">
<span class="tgl_switch"></span>
<span class="tgl_track">
<span class="tgl_bgd"></span>
<span class="tgl_bgd tgl_bgd-negative"></span>
</span>
</span>
</label>