.cta-small
  margin: 20px auto

  a, span
    color: $yellow
    +font-bold(22px, 22px)

  a
    background-color: $black
    padding: 16px 22px
    position: relative
    display: inline-block

    &:hover
      .top
        width: calc(100% + 8px)
        +transition-delay(0s)
      .right
        height: calc(100% + 8px)
        +transition-delay(0.15s)
      .bottom
        width: calc(100% + 8px)
        +transition-delay(0.3s)
      .left
        height: calc(100% + 8px)
        +transition-delay(0.45s)
      span:not(.border-animation)
        &:after
          +transform(translate3d(120px,0,0))
          opacity: 0


    .top
      position: absolute
      width: 0
      height: 4px
      top: -4px
      left: -4px
      background: $yellow
      +transition(all 0.15s)
      +transition-delay(0.45s)

    .right
      position: absolute
      width: 4px
      height: 0
      right: -4px
      top: -4px
      background: $yellow
      +transition(all 0.15s)
      +transition-delay(0.3s)

    .bottom
      position: absolute
      width: 0
      height: 4px
      bottom: -4px
      right: -4px
      background: $yellow
      +transition(all 0.15s)
      +transition-delay(0.15s)

    .left
      position: absolute
      width: 4px
      height: 0
      left: -4px
      bottom: -4px
      background: $yellow
      +transition(all 0.15s)

    span:not(.border-animation)
      position: relative
      &:after
        content: ''
        background-color: white
        height: 2px
        width: 100%
        +position(absolute, null 0 0 0)
        +transform(translate3d(0,0,0))
        opacity: 1
        +transition(all 0.3s)