<!-- Fix for https://drp.io/f/NJ7AzglbM -->

<div class="cntr">
  
  <input type="checkbox" id="cbx" class="cbx hidden"/>
  <label for="cbx" class="lbl"></label>

</div>

body
  background #181818
  
*
  box-sizing border-box

.lbl
  position relative
  display block
  height 22px
  width 40px
  background black
  border-radius 100px
  cursor pointer
  border 2px solid #404040
  transition all .2s ease
  &:after
    position absolute
    left -2px
    top -2px
    display block
    width 22px
    height 22px
    border-radius 100px
    background #A0A0A0
    box-shadow 0 1px 2px rgba(black,.4)
    content ''
    transition all .3s ease
  &:active
    &:after
      width 26px
      background white

.cbx:checked ~ label
  background #1DB955
  border-color #1DB955
  &:after
    //right -2px
    //left inherit
    transform translateX(18px)
    background white
  &:active
    &:after
      transform translateX(14px)
    
.cntr
  position absolute
  top 50%
  left 50%
  transform translate(-50%,-50%)
  
.hidden
  display none