This article demonstrates how to style regular HTML checkboxes as toggle buttons using only CSS3 without JavaScript.

HTML structure is very simple. For one toggle button you'll need: input element (HTML checkbox) and label element with i element inside.

There is only one important thing which you have to know about HTML structure, the label element has two additional attributes: data-text-true and data-text-false. These attributes are used by CSS styles to display the title in the toggle button with two states: checked and not checked.

Facebook comments

Discussion (total 2 comments)

Olaolu Olawuyi

July 22, 2014 at 08:23 am

tanx very much nice code for acheckbox and i also love the design.#Whizkydee

Michael

August 31, 2015 at 11:00 am

Nice effect but it misuses the label element, which should be used to describe the purpose of the input field. From an accessibility standpoint the check box has a empty label. You can tweak it to make it more accessible and maintain the effect plus get the add bonus of being able to click on the label text to enact the effect. http://codepen.io/Mash19/pen/QjWGdG