Styling checkbox as toggle button using only CSS3

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.

HTML code for one toggle button (checkbox):

<input id="checkbox1" type="checkbox" checked>
<label for="checkbox1" data-text-true="Yes" data-text-false="No"><i></i></label>
Do you want to learn CSS?

CSS styles:

input[type=checkbox] {
  display: none;
}

input[type=checkbox] + label {
  display: inline-block;
  background-color: #DB574D;
  color: white;
  font-family: sans-serif;
  font-size: 14px;
  font-weight: bold;
  height: 30px;
  line-height: 30px;
  position: relative;
  text-transform: uppercase;
  width: 80px;
}

input[type=checkbox] + label,
input[type=checkbox] + label i {
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}

input[type=checkbox]:checked + label {
  background-color: #67B04F;
}

input[type=checkbox] + label:before,
input[type=checkbox] + label:after,
input[type=checkbox] + label i {
  width: 50%;
  display: inline-block;
  height: 100%;
  text-align: center;
}

input[type=checkbox] + label:before {
  content: attr(data-text-true);
}

input[type=checkbox] + label:after {
  content: attr(data-text-false);
}

input[type=checkbox] + label i {
  top: 10%;
  background-color: white;
  height: 80%;
  left: 5%;
  position: absolute;
  width: 45%;
}

input[type=checkbox]:checked + label i {
  left: 50%;
}

Live demo

The following archive contains the example above:

checkbox_as_toggle_button_using_only_css3.zip 1.01 kB