@import '../../../scss/base';
.react-button {
    a{
        display: inline-block;
        color: #fff;
        padding: 17px 33px;
        font-size: 16px;
        font-weight: 700;   
        font-family: $titleFont;
        line-height: 16px;
        text-align: center;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        background: $primaryColor;
        border-radius: 2px;
        position: relative;
        transition: 0.3s;
        z-index: 1;
        overflow: hidden;        
        &:hover {
            background: $titleColor;
        }
        svg {
            width: 20px;
            position: relative;
        }
        &::after {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            content: "";
            background: $titleColor;
            transform: translateY(110%);
            transition: 0.3s;
            z-index: -1;
        }
        &:hover::after {
            transform: translateY(0%);
        }  
           
    }
    &.secondary_btn{
       a{
            background: $titleColor;
            &:after{
              background: $primaryColor;
            }
       }     
    }  
}