14 April 2018 / Material Design

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