• HTML
• CSS

HTML

<a href="" class="button">
    <div class="btn-text">Learn More</div>
</a>

CSS

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
body{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    background-color:#6544d4;
}
.button{
    position:relative;
    font-size:40px;
    color:#fff;
    text-decoration:none;
    letter-spacing:3px;
    padding:20px 50px;
    border:3px solid #fff;
    overflow:hidden;
    transition:color 0.5s linear;
}
.btn-text{
    position:relative;
    z-index:2;
}
.button:hover{
    color:#6544d4;
}
.button:before{
    content:'';
    position:absolute;
    top:0;
    left:-45px;
    height:100%;
    width:150%;
    background-color:#fff;
    transform:translateX(-100%) skew(40deg);
    transition:transform 0.5s linear;
}
.button:hover::before{
    transform:translateX(-1%) skew(40deg);
}

/* All credits to: https://www.youtube.com/watch?v=DDlPzvk0nSc */