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.
checked state internally.
The markup consists of a container
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>