#btn
  #checkbox
    .tick
      #rect1
      #rect2
  
View Compiled
custom_time_func = cubic-bezier(.38,.24,.28,1.17)

body
  display flex
  width 100vw
  height 100vh
  justify-content center
  align-items center
  background #F2F2F2
  #btn
    background white
    width 180px
    height 96px
    border-radius 24px
    box-shadow 0px 64px 96px rgba(0,0,0,0.05)
    &:hover
      cursor pointer
    #checkbox
      width 72px
      height 72px
      margin-left 96px
      margin-top 12px
      background #7DD451
      border-radius 16px
      box-shadow 0px 4px 4px rgba(125,212,81,0.2)
      .tick
        background transparent
        transform rotate(45deg)
        position absolute
        margin-left 44px
        margin-top 11px
        #rect1
          background white
          width 8px
          height 40px
          margin-left 12px
          position absolute
        #rect2
          background white
          width 20px
          height 8px
          margin-top 32px
          position absolute
          
.h_btn
  transform scale(0.9)
.h_cb
  margin-left 12px !important
  background #E5E5E5 !important
  box-shadow 0px 4px 4px rgba(0,0,0,0.05) !important
.h_rects
  background #E5E5E5 !important
  
  
 // Sorry for that...
 *
   transition all 0.3s custom_time_func
View Compiled
// Get elements
let btn = document.getElementById("btn")
let checkbox = document.getElementById("checkbox")
let rect1 = document.getElementById("rect1")
let rect2 = document.getElementById("rect2")

// Set events
btn.addEventListener("mousedown", animeDown)
btn.addEventListener("mouseup", animeUp)

// CSS toggle functions
function animeDown() {
  btn.classList.toggle("h_btn")
}

function animeUp() {
  btn.classList.toggle("h_btn")
  checkbox.classList.toggle("h_cb")
  rect1.classList.toggle("h_rects")
  rect2.classList.toggle("h_rects")
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.