KdadxJ

index.html

<label class="switch">
  <input type="checkbox"/>
  <div class="circle"></div>
</label>

KdadxJ.markdown

KdadxJ

A Pen by jgermade on CodePen.

License.

style.css

$brand-color: RoyalBlue

.switch
  display: inline-block
  position: relative
  width: 4rem
  height: 2rem
  cursor: pointer
  -webkit-user-select: none
  -moz-user-select: none
  user-select: none
  
  > input
    opacity: 0
  
  .circle:before
    content: ''
    display: block
    position: absolute
    top: 10%
    left: 15%
    right: 15%
    bottom: 10%
    border-radius: 1rem
    border: 2px solid $brand-color
    background: rgba($brand-color, 0)
    transition: background 0.4s linear
  
  .circle:after
    content: ''
    position: absolute
    top: 0
    left: 50%
    width: 2rem
    height: 2rem
    background: $brand-color
    transition: left 0.4s ease
    border-radius: 50%
    border: 2px solid white
    margin-top: -2px
    
.switch:hover > .circle:after
  background: darken($brand-color, 10)
  
.switch:active > .circle:after
  background: darken($brand-color, 20)
  
.switch > input:checked + .circle:before
  background: rgba($brand-color, 1)
  
.switch > input:checked + .circle:after
  left: 0