Simpe CSS Button Hover Effect

Preview

Markup

<div class="light"> <a href="#" class="btn btn-dark">
        View Portfolio
    </a>

</div>
<div class="dark"> <a href="#" class="btn btn-white">
        View Portfolio
    </a>

</div>

CSS

body {
    font-family:'Montserrat', sans-serif;
}
a {
    color: #363636;
    text-decoration: none;
}
a:hover {
    text-decoration: none;
    color: #bf9f88;
}
.dark, .light {
    text-align: center;
    padding: 50px 0;
    margin: 10px 0;
    background: #363636;
}
.light {
    background: #ffffff;
}
.btn {
    border: 2px solid;
    border-radius: 0px;
    padding: 8px 24px;
    text-transform: uppercase;
    font-size: 13px;
    transition: all .3s;
    position: relative;
    background-color: transparent;
    z-index: 20;
}
.btn:hover:after {
    width: 100%;
}
.btn:after {
    content:"";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100%;
    width: 0;
    z-index: -1;
    transition: all .3s ease-in;
}
.btn-dark {
    border-color: #363636;
    color: #363636;
}
.btn-dark:hover {
    color: #fff;
}
.btn-dark:after {
    background-color: #363636;
}
.btn-white {
    border-color: #fff;
    color: #fff;
}
.btn-white:hover {
    color: #363636;
}
.btn-white:after {
    background-color: #fff;
}

Source