<label>
  <span>Wax</span>
  <input type="checkbox" checked="checked" />
</label>
<label>
  <span>Wax</span>
  <input type="checkbox" />
</label>

/* Make things pretty */
body {
  font: 14px/20px Arial, sans-serif;
  background: #ddd;
  margin: 4em auto;
  width: 200px;
  color: #444;
}
label {
  background: #fff;
  border: 1px solid #bbb;
  display: block;
  border-radius: 10px;
  padding: 1em;
  margin: 0 0 1em;
  position: relative;
  cursor: pointer;
}
label span {
  padding-right: 2em;
  width: 5em;
  display: inline-block;
}

/* Mask the checkbox under the :after */
input[type=checkbox] {
  margin-left: 3em;
}
/* Insertion of modified checkbox states */
input[type=checkbox]:after {
  /* Default off state */
  content: "Off";
  /* Display */
  position: absolute;
  z-index: 1;
  margin: -1.1em 0 0;
  top: 50%;
  right: 1em;
  display: inline-block;
  background: #ff9999;
  padding: 0.5em 1em;
  width: 4em;
  border-radius: 1em;
  box-shadow:
    inset 1px 1px 1px rgba(0,0,0,0.3);
  color: #cc3333;
  text-shadow:
    1px 1px rgba(255,255,255,0.4);
  text-transform: uppercase;
  font-size: 11px;
  text-align: left;
}
input[type=checkbox]:checked:after { 
  /* State */
  content: "On";
  /* Display */
  text-align: right;
  background: #9ad179;
  color: #669933;
}

/* Visual indicator */
input[type=checkbox]:before {
  content: "";
  position: absolute;
  z-index: 2;
  width: 1.6em;
  height: 1.6em;
  top: 50%;
  margin-top: -0.8em;
  right: 1em;
  background: #eee;
  border-radius: 1em;
  box-shadow:
    0 1px 1px #999,
    inset 0 3px 4px #fff;
  transition: right 0.05s linear;
}
input[type=checkbox]:checked:before {
  right: 4em;
}

/*
  Note:
  
  Works in Webkit only, as other
  browsers do not recognise input
  (self-closing elements) as valid
  targets for :before or :after.
  
  Degrades nicely into a regular
  checkbox on unsupported platforms
  however!
*/