JSFiddle - React, Tailwind, and code Playground

HTML

Sprite Sheet:<br>
<img src='http://www.sethcohen.net/img/Prev.png' class='buttons'><br>
<br>
    Mouse over / click the below to see it in action<br>
<div>
    <a href="javascript:void(0);" class="leftButton navButton" id='lefty'>
        <span></span>
    </a>
</div>

CSS

.navButton span{
    width:32px;
    height:32px;
    display:block;
    }

    a.leftButton span, a#leftButton span{
    background-image:url(http://www.sethcohen.net/img/Prev.png);
    background-position:-64px 0px;
    }

    /*nav button sprites */
    
    /*sprite order is pushed, hover, natural */
    
    a.leftButton.navOver span, a.rightButton.navOver span{
    background-position:-32px 0px;
    }
    
    a.leftButton.navPressed span, a.rightButton.navPressed span{
    background-position:0px 0px;
    }

	.buttons{
    border:1px solid black;
    }    

    div {
    display:inline-block;
    border:1px solid black;
    }
    }

JavaScript

$('.leftButton').mousedown(function() {

            $('.leftButton').addClass('navPressed');
            console.log('mousedown');
   
    });
    $('.leftButton').mouseup(function() {
            $('.leftButton').removeClass('navPressed');
            console.log('mouseup');
    });

    $('.leftButton').hover(function() {
            $('.leftButton').addClass('navOver');
            console.log('hover');
    });


    $('.leftButton').mouseout(function() {
            $('.leftButton').removeClass('navPressed').removeClass('navOver');
            console.log('mouseout');
    });