Toggle

index.html

<div class="center">
  <input type="checkbox" id="cbx" style="display:none"/>
  <label for="cbx" class="toggle">
    <span>
      <svg width="10px" height="10px" viewBox="0 0 10 10">
        <path d="M5,1 L5,1 C2.790861,1 1,2.790861 1,5 L1,5 C1,7.209139 2.790861,9 5,9 L5,9 C7.209139,9 9,7.209139 9,5 L9,5 C9,2.790861 7.209139,1 5,1 L5,9 L5,1 Z"></path>
      </svg>
    </span>
  </label>    
</div>

style.stylus

html,body
  height: 100%
  
.toggle
  position: relative
  display: block
  width: 42px
  height: 24px
  cursor: pointer
  -webkit-tap-highlight-color: transparent
  transform: translate3d(0,0,0)
  &:before
    content: ""
    position: relative
    top: 1px
    left: 1px
    width: 40px
    height: 22px
    display: block
    background: #C8CCD4
    border-radius: 12px
    transition: background .2s ease
  span
    position: absolute
    top: 0
    left: 0
    width: 24px
    height: 24px
    display: block
    background: white
    border-radius: 50%
    box-shadow: 0 2px 6px rgba(#9A9999,.75)
    transition: all .2s ease
    svg
      margin: 7px
      fill: none
      path
        stroke: #C8CCD4
        stroke-width: 2
        stroke-linecap: round
        stroke-linejoin: round
        stroke-dasharray: 24
        stroke-dashoffset: 0
        transition: all .5s linear
        

#cbx:checked + .toggle
  &:before
    background: #52D66B
  span
    transform: translateX(18px)
    path
      stroke: #52D66B
      stroke-dasharray: 25
      stroke-dashoffset: 25

.center
  position: absolute
  top: calc(50% - 12px)
  left: calc(50% - 21px)

toggle.markdown

Toggle

A Pen by Andreas Storm on CodePen.

License.