class 33 hover effet

html file---------

<a href="#" class="bordered-btn">Request a Free Consultation</a>



css file.......

.bordered-btn{
    display: inline-block;
    border: 2px solid #CDA973;
    padding: 10px 20px;
    font-weight: 700;
    margin-top:10px;
    font-size: 16px;
    color: #fff;
    -webkit-transition: .4s;
    transition: .4s;
    position: relative;
}
.bordered-btn:hover {
    color: #fff;
    border: 2px solid transparent;
}
.bordered-btn:after {
    position: absolute;
    content: "";
    right: -2px;
    bottom: -2px;
    width: 0px;
    height: 0px;
    border-right: 2px solid #CDA973;
    border-bottom: 2px solid #CDA973;
    -webkit-transition: .3s;
    transition: .3s;
    opacity: 0
}
.bordered-btn:before {
    position: absolute;
    content: "";
    left: -2px;
    top: -2px;
    width: 0px;
    height: 0px;
    border-left: 2px solid #CDA973;
    border-top: 2px solid #CDA973;
    -webkit-transition: .3s;
    transition: .3s;
    opacity:0
}
.bordered-btn:hover:before, .bordered-btn:hover:after {
    width: 50px;
    height: 50px;
    opacity:1
}