JSFiddle - React, Tailwind, and code Playground

by cvalleskey

HTML

<span class="btn"></span>

CSS

.btn {
    background: url(http://cl.ly/image/2i381Q3C2N3N/like.png) no-repeat;
    display: block;
    width: 40px;
    height: 40px;
    cursor: pointer;
}

.btn.active {
    -webkit-animation: anim 0.125s steps(4) forwards;
}

@-webkit-keyframes anim {
    0% {
        background-position: 0px;
    }
    100% {
        background-position: -160px;
    }
}

JavaScript

$(function() {
    $('.btn').mousedown(function() {
        $(this).toggleClass('active');
    });
});