.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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.