input#cb(type="checkbox")
label.toggle(for="cb") 
label Hello World
View Compiled
html
  font-size 60px
  height 100%
  
body
  height 100%
  display flex
  justify-content center
  align-items center
  
  
#cb
  display none    
  
.toggle
  width 1.9em
  height 0.9em
  border-radius .5em
  padding 0
  margin 0
  background-color currentColor
  border .05em solid currentColor
  color gray
  display inline-block
  position relative
  transition color .2s 
  overflow hidden
  cursor pointer
  
  &::before
    width 3em
    height .9em
    content ''
    background-color white
    border-radius .5em
    position absolute
    top 0
    left -2.1em
    transition transform .35s cubic-bezier(0.85, 0.05, 0.18, 1.35)
    
  :checked + &
    color red
   
    &::before
      transform translateX(3.1em)
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.