Button Switches with Checkboxes and CSS3 Fanciness

For a while now, Hugo Giraudel is having fun with the new CSS properties (CSS3). It’s an incredible playground for creativity and cleverness. He particularly enjoy designing and creating UI elements like buttons, switches, toggles and such. That’s the focus of this tutorial, he will show you how to create button switches with CSS only, without a line of JavaScript.

The checkbox hack allows you to have a toggle handler in pure CSS. It relies on a checkbox (which is either checked or unchecked), the :checked pseudo-selector, and a sibling selector (~ or +). Basically, you can say “if the checkbox is checked, then the following X element is behaving like this”. The old way consisted of having a checkbox with an ID, and a label tag with a “for” attribute calling the checkbox ID. This technique allowed to hide the checkbox and still toggle it by clicking on the label. The only problem with this approach it that mobile Safari doesn’t support it. So Hugo Giraudel has a workaround for that: he turns the checkbox invisible with the opacity property, set it on top of whatever element he wants and there you go, when clicking the element, you are actually clicking the checkbox!