html, body
  background-color: #f2f2f2
  color: #232323
  font-family: sans-serif
  height: 100vh
  
  .wrapper
    width: 1000px
    margin: 0 auto
    text-align: center
    
    .row
      margin: 100px auto
    
    .btn-yellow
      position: relative
      border: 6px solid #232323
      z-index: 2
      padding: 12px 22px
      margin: 0 10px
      box-sizing: border-box
      font-size: 26px
      font-weight: 600
      text-transform: uppercase
      text-decoration: none
      color: #232323
      
      &:hover
        &:before
          top: 0
          left: 0
          width: 102%
          height: 100%
      &:active
        &:before
          top: -10px
          left: 18px
          width: 102%
          height: 100%
      
      &:before
        content: ''
        position: absolute
        z-index: -1
        top: 12px
        left: -14px
        width: calc(100% + 6px)
        height: calc(100% + 6px)
        background-color: #f9d159
        transition: all .3s ease
    
    .btn-red
      @extend .btn-yellow
      
      &:before
        background-color: #e45050
    
    .btn-blue
      @extend .btn-yellow
      
      &:before
        background-color: #58a9ee
      
    .btn-purple
      @extend .btn-yellow
      
      &:before
        background-color: #bc79e7
    
    .btn-green
      @extend .btn-yellow
      
      &:before
        background-color: #36bf73
    
    .btn-pink
      @extend .btn-yellow
      
      &:before
        background-color: #e855cb
    
    .btn-lime
      @extend .btn-yellow
      
      &:before
        background-color: #a4f478
      
    .btn-aqua
      @extend .btn-yellow
      
      &:before
        background-color: #5af3f5
      
    .btn-orange
      @extend .btn-yellow
      
      &:before
        background-color: #dc612b
      
    .btn-gold
      @extend .btn-yellow
      
      &:before
        background-color: #c5ac47
    
    .btn-grey
      @extend .btn-yellow
      
      &:before
        background-color: #a8a8a1