%btn{
    display: inline-block;
    line-height: 1;
    @include border();
    padding: 10px 30px;
    font-size: 0.9rem;
    text-transform: uppercase;
}
%btn-hover{
    @extend %perspective;
    overflow: hidden;
    &:after{
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0;
        display: block;
        z-index: -1;
        left: 0;
        background-color: $color_primary;
        animation: scale-out-hor-left 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
        content: '';
    }
    &:hover{
        border-color: $color_primary;
        color: $color_white;
        &:after{
            animation: scale-in-hor-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        }
    }
}

.#{$prefix}-border-btn{
    @extend %btn;
    
    &.#{$prefix}-border-btn-white{
        border-color: $color_white;
        @extend %btn-hover;
    }
   
}