A Pen by Ian McNally.

Checkbox-slider.markdown

Checkbox slider

A sliding checkbox for representing an on/off toggle in a simple and slick way.

A Pen by Ian McNally on CodePen.

License.

index.html

<div class="container">
	<input type="checkbox" name="check-1" id="check-1"/>
  <label for="check-1"></label>
</div>

style.sass

.container
  text-align: center
  width: 100%
  padding: 15px

  input
    display: none
  
  label
    display: block
    height: 35px
    width: 70px
    background-color: white
    border: 1px solid #eaeaea
    transition: 2.5s all ease-in
    border-radius: 15px
    position: relative
      
    &:after
      content : ''
      display: inline-block
      background-color: white
      border-radius: 15px
      border: 1px solid grey
      height: 30px
      width: 30px
      position: absolute
      left: 0
      top: 0
      transform: translate3d(0, 0, 0)
      margin-top: 1px
  
  input:checked + label
    background-color: #33CC00
      
    &:after
      transform: translate3d(100%, 0, 0)