On/Off Switch - CSS3 proto.io

by Ayyappan Sakthivadivel

HTML

<div class="onoffswitch">
    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
    <label class="onoffswitch-label" for="myonoffswitch">
        <span class="onoffswitch-inner"></span>
        <span class="onoffswitch-switch"></span>
    </label>
</div>
<br/>
<div class="ig-switch">
    <input type="checkbox" name="onoffswitch" class="switch-checkbox" id="myonoffswitch2" checked>
    <label class="switch-label" for="myonoffswitch2">
        <span class="switch-inner"></span>
        <span class="switch-hldr"></span>
    </label>
</div>

SCSS

.onoffswitch {
  position: relative;
  width: 56px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  
  .onoffswitch-checkbox {
    display: none;
  }

  .onoffswitch-label {
    display: block;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid #D4D4D4;
    border-radius: 3px;
  }

  .onoffswitch-inner {
    display: block;
    width: 200%;
    margin-left: -100%;
    -moz-transition: margin 0.3s ease-in 0s;
    -webkit-transition: margin 0.3s ease-in 0s;
    -o-transition: margin 0.3s ease-in 0s;
    transition: margin 0.3s ease-in 0s;

    &:before, &:after {
      display: block;
      float: left;
      width: 50%;
      height: 16px;
      padding: 0;
      line-height: 16px;
      font-size: 10px;
      color: white;
      font-family: Trebuchet, Arial, sans-serif;
      font-weight: bold;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }

    &:before {
      content: "Left";
      padding-left: 10px;
      background-color: #54A2F5;
      color: #FFFFFF;
    }

    &:after {
      content: "Right";
      padding-right: 10px;
      background-color: #FC3535;
      color: #FFFFFF;
      text-align: right;
    }
  }

  .onoffswitch-switch {
    display: block;
    width: 9px;
    margin: 3.5px;
    background: #FFFFFF;
    border: 1px solid #D4D4D4;
    border-radius: 3px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 36px;
    -moz-transition: all 0.3s ease-in 0s;
    -webkit-transition: all 0.3s ease-in 0s;
    -o-transition: all 0.3s ease-in 0s;
    transition: all 0.3s ease-in 0s;
  }

  .onoffswitch-checkbox:checked + .onoffswitch-label {
    .onoffswitch-inner {
      margin-left: 0;
    }

    .onoffswitch-switch {
      right: 0px;
    }
  }
}

.ig-switch {
  position: relative;
  width: 100px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  
  .switch-checkbox {
    display: none;
  }

 ...