A very nice collection of checkboxes made purely in CSS3 by me. The checkboxes you see above are nothing but the labels for their respective inputs while the checkbox inputs are hidden because these have a very limited CSS styling support. These checkboxes will work in all the major browsers except Internet Explorer 8 and below.

Animations are achieved using the transition property. Extra elements like "ON" and "OFF" are created using :after and :before pseudo elements of labels or the container divs. These can be easily used in real world projects, take a look at the code to learn more about them.

Related: