JSFiddle - React, Tailwind, and code Playground

HTML

<div class="btn btn--large ">
    <a href="">
        <span>
        NEXT CASE STUDY
        </span>
    </a>
</div>

CSS

.btn {
    display: inline-block;
    text-transform: uppercase;
    position: relative;
    letter-spacing: 1px;
    font-size: 13px;
    border: 2px solid #0c315d;
}

.btn--large a {
    padding: 16px 60px 16px 16px;
    display: block;
}

.btn span {
    font-weight: 700;
    position: relative;
}

JavaScript

jQuery(document).ready(function($) {
    // vars
    $btnSpan = $('.btn a span');
    $btnParent = $btnSpan.parent();

    // animate button text
    $(".btn a").bind("mouseenter",function(){
        var paddingLeft = parseInt($btnParent.css('paddingLeft'));
        var moveLeft = $btnParent.outerWidth()/2-$btnSpan.width()/2-paddingLeft;
       $(this).find($btnSpan).stop(true, false).animate({
       		left: moveLeft, ease: "Bounce"}, 600);

    }).bind("mouseleave",function(){
       $(this).find($btnSpan).stop(true, false).animate({left:"0%", ease: "Bounce"}, 200);
    });
}(jQuery));