Cacher is the code snippet organizer for pro developers

a.button.button-primary.hover-shutter-out-vertical(href='#')
  span Button

.button-primary
  background #333
  box-sizing border-box
  color #fff
  line-height 1.5
  padding 15px 10px
  text-align center
  transition color 0.3s
  width 200px

  span
    position relative

.hover-shutter-out-vertical
  position relative

  &::before, &::after
    absolute bottom left
    content ''
    size 100%
    transition all 0.3s

  &::before
    background #fff
    opacity 0
    transform scale(1, 0.1)

  &:hover
    color #333

    &::before
      opacity 1
      transform scale(1, 1)

    &::after
      opacity 0
      transform scale(1, 0.1)

<link href="https://codepen.io/futemma/pen/REpRLV" rel="stylesheet" />