A Pen by Rodrigo Muniz.

index.html

<div class="slide pull-right">
  <input type="checkbox" id="check" />
  
  <label for="check" class="slider">
    <label for="check" class="display on">ON</label>
    <span class="switch"></span>
    <label for="check" class="display off">OFF</label>
  </label>
</div>

Pure-CSS3-on-off-switch.markdown

Pure CSS3 on/off switch

Pure CSS3 switch with inner labels.

A Pen by Rodrigo Muniz on CodePen.

License.

style.less

html {
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #333;
  background-color: #FFF;
}
body {
  margin: 180px auto;
  width: 100px;
}

// LESS Based: http://codepen.io/godisacoder/pen/aGHDK
.slide {
      display: block;
      width: auto;
        -webkit-user-select: none;
           -moz-user-select: none;
      position: relative;
    
      input[type="checkbox"] { display: none }
    
      .slider {
        display: inline-block;
        border-radius: 16px;
        width: 64px;
        height: 26px;
        white-space: nowrap;
        position: relative;
        cursor: pointer;
        box-shadow: inset 3px 1px 0 1px rgba(0, 0, 0, 0.04), inset -3px -1px 0 1px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.1);
          -webkit-transition: all 0.3s ease-in-out;
             -moz-transition: all 0.3s ease-in-out;
                  transition: all 0.3s ease-in-out;
    
        &:hover .switch {border-color: #08c;}
    }
  
    input:checked ~ .slider {background: #dff0d8;}
  
    .display {
        display: inline-block;
        cursor: pointer;
        font-weight: bold;
        position: absolute;
        top: 3px;
          -webkit-transition: all 250ms;
             -moz-transition: all 250ms;
                  transition: all 250ms;
    }
  
    .on {
        color: #468847;
        pointer-events: none;
        left: 10px;
    }
    .off {
        color: #808080;
        pointer-events: auto;
        right: 8px;
  }
  
    input:checked ~ .slider .off {
        opacity: 0;
        right: 0;
    }
    input:not(:checked) ~ .slider .on {
        opacity: 0;
        left: 0;
    }
  
    input:not(:checked) ~ .on    {
        pointer-events: auto;
        color: #edeff0;
    }
    input:not(:checked) ~ .off   {
        pointer-events: none;
        color: #27343e;
    }
  
    input:not(:checked) ~ .on:hover,
    input:checked ~ .off:hover {color:#314554}
  
    .switch {
        width: 24px;
        height: 24px;
        border-radius: 26px;
        background: #fff;
        display: block;
        position: absolute;
        top: -1px;
        left: -3px;
            -webkit-transition: all 250ms;
               -moz-transition: all 250ms;
                    transition: all 250ms;
        border: 2px solid #ccc;
        box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
    }
    input:checked ~ label .switch {
        left: 100%;
        margin-left: -24px;
        border-color: #46a546;
    }

}