JSFiddle - React, Tailwind, and code Playground

HTML

<p><a href="#" class="sliding_link sliding_link_ok"><span class="sliding_link_image">OK</span><span class="sliding_link_shadow"></span></a> <a href="#" class="sliding_link sliding_link_cancel"><span class="sliding_link_image">Cancel</span><span class="sliding_link_shadow"></span></a></p>

CSS

.sliding_link, .sliding_link span {
    width: 132px;
    height: 51px;
    float: left;
    margin-right: 20px;
    font-size: 0;
    line-height: 0;
    cursor: pointer; /* IE 7 */
}

.sliding_link {
    position: relative;
}

.sliding_link span {
    position: absolute;
}

.sliding_link .sliding_link_shadow, .sliding_link_image {
    background-image:...

JavaScript

$(document).ready(function() {
    $('.sliding_link').hover(function() {
        if ($(this).hasClass('sliding_link_ok')) {
            sliding_link_original_background_position = -24;
        }
        else {
            sliding_link_original_background_position = -166;
        }

        $(this).find('.sliding_link_image').animate({
            'backgroundPosition': (sliding_link_original_background_position + 10) + 'px'
        }, 150);
    }, function() {
        $(this).find('.sliding_link_image').animate({
            'backgroundPosition': sliding_link_original_background_position + 'px'
        }, 150);
    });
});