Cacher is the code snippet organizer for pro developers

color = #fff

body
  background #786699

  .icon
    width 40px
    height 40px
    position absolute
    top 50%
    left 50%
    cursor pointer
    margin -20px
    i
      width 2px
      height 14px
      background #786699
      display block
      transform rotate(45deg)
      left 19px
      position absolute
      top 13px
      opacity 0
      transition all .8s ease
      &:after
        content''
        display block
        width 14px
        height 2px
        background #786699
        position absolute
        left -6px
        top 6px
    &:after
      content''
      display block
      width 10px
      height 10px
      border-radius 100%
      position absolute
      left 15px
      top 15px
      box-shadow 14px 0px 0px color, -14px 0px 0px color
      transition all .4s ease
      z-index -1
    &:before
      content''
      display block
      width 40px
      height 40px
      border-radius 100%
      transform scale(.25)
      background color
      position absolute
      transition all .6s ease
  .icon.active
    &:before
      transform scale(1)
    &:after
      box-shadow 0px 0px 0px color, 0px 0px 0px color
      opacity 0.4
    i
      opacity 1

  .tap
    width 80px
    height 80px
    display block
    position absolute
    left -20px
    top -20px
    opacity 1
    transform scale(0)
    border-radius 100%
    background-color rgba(color, .6)
    &.active
      transition all 400ms cubic-bezier(0, 0.7, 0.5, 1)
      opacity 0
      transform scale(1)
      
    

$(".icon").on 'tap', ->
  $(this).toggleClass 'active'
  $('.tap').addClass 'active'
  
$(".icon").bind 'transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', ->
  $('.tap').removeClass 'active'

<div class="icon">
  <i></i>
  <span class="tap"></span>
</div>