Button chuyển màu đẹp

**** HTML

 <div class="text-center m-2">
            <a href="tin-tuc" class="btn btn-effect-default btn-theme">Xem tất cả</a>
</div>

**** CSS: 

.btn-effect-default.btn-theme{
    border: 1px solid #f1c232;
}

.btn-effect-default.btn-theme:before{
    background-color:#f1c232;
}

.btn-effect-default.btn-theme:hover{
    background-color:#fff;
    color:#f1c232;
}

.btn-effect-default{

    position:relative;

    display:inline-block;

    font-weight:700;

    line-height:30px;

    cursor:pointer;

    text-decoration:none;

    padding:5px 28px;

    color:#fff;

    border:1px solid #000;

    border-radius:5px 5px;

    text-transform:uppercase;

    font-size:17px;

    text-align:center;

    letter-spacing:1px;

    background-color:transparent;

    -webkit-transition:color 0.45s cubic-bezier(.785,.135,.15,.86),border 0.45s cubic-bezier(.785,.135,.15,.86);transition:color 0.45s cubic-bezier(.785,.135,.15,.86),border 0.45s cubic-bezier(.785,.135,.15,.86);

    z-index:1;

    overflow:hidden

}

.btn-effect-default:before{

    position:absolute;

    content:'';

    display:block;

    left:-2px;top:0;

    right:-2px;

    bottom:0;

    -webkit-transform:scale(1,1);

    transform:scale(1,1);

    -webkit-transform-origin:left center;

    transform-origin:left center;

    z-index:-1;

    background-color:#000;

    -webkit-transition:-webkit-transform 0.45s cubic-bezier(.785,.135,.15,.86);

    transition:-webkit-transform 0.45s cubic-bezier(.785,.135,.15,.86);

    transition:transform 0.45s cubic-bezier(.785,.135,.15,.86)

}

.btn-effect-default:hover:before{

    -webkit-transform-origin:right center;

    transform-origin:right center;

    -webkit-transform:scale(0,1);

    transform:scale(0,1)

}