.toggleWrapper
	input(type="checkbox")#dn.dn
	label(for="dn").toggle
		span.toggle__handler
View Compiled
=transition($property: all)
  transition: $property 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95)

$gray: #EDF0F4
$red: #D21626
$green: #66B317

body
  background-color: $gray
  font-family: 'Helvetica Rounded', 'Arial Rounded MT Bold','Montserrat', sans-serif
  color: #fff

.toggleWrapper
  position: absolute
  top: 50%
  left: 50%
  overflow: hidden
  transform: translate3d(-50%, -50%, 0)
  input
    position: absolute
    left: -99em

.toggle
  cursor: pointer
  display: inline-block
  position: relative
  width: 120px
  height: 50px
  background: $red
  //border: 4px solid darken($gray, 10%)
  border-radius: 5px

  +transition
  &:before, &:after
    position: absolute
    line-height: 50px
    font-size: 14px
    z-index: 2
    +transition
  &:before 
    content: 'OFF'
    left: 20px
    color: $red
 
  &:after 
    content: 'ON'
    right: 20px
    color: #fff
  
.toggle__handler
  display: inline-block
  position: relative
  z-index: 1
  background: #fff
  width: 65px
  height: 44px
  border-radius: 3px
  top: 3px
  left: 3px
  +transition
  transform: translateX(0px)

input:checked
  + .toggle
    background: $green
    &:before
      color: #fff
    &:after
      color: $green
    .toggle__handler
      width: 54px
      transform: translateX(60px)
      border-color: #fff
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.