Material Design Toggle

Material Design Toggle
A Material Design Toggle example.
Made with
Html
Css/Stylus
Html
<div class="cntr">
<div class="row press">
<input type="checkbox" id="unchecked" class="cbx hidden"/>
<label for="unchecked" class="lbl"></label>
</div>
<div class="row press">
<input type="checkbox" id="checked" class="cbx hidden" checked/>
<label for="checked" class="lbl"></label>
</div>
<div class="row">
<input type="checkbox" id="unchecked_disabled" class="cbx hidden" disabled/>
<label for="unchecked_disabled" class="lbl"></label>
</div>
</div>
Css
body
background #EEEEEE
.lbl
position relative
display block
height 20px
width 44px
background #898989
border-radius 100px
cursor pointer
transition all .3s ease
&:after
position absolute
left -2px
top -3px
display block
width 26px
height 26px
border-radius 100px
background white
box-shadow 0px 3px 3px rgba(#000,.05)
content ''
transition all .3s ease
&:active
&:after
transform scale(1.15, .85)
.cbx:checked ~ label
background #6FBEB5
&:after
left 20px
background #179588
.cbx:disabled ~ label
background #D5D5D5
pointer-events none
&:after
background #BCBDBC
.cntr
position absolute
top 50%
left 50%
transform translate(-50%,-50%)
.press
margin-bottom 40px
.hidden
display none
Author
Andreas Storm
Demo
See the Pen Material Design Toggle by Andreas Storm (@andreasstorm) on CodePen.