JSFiddle - React, Tailwind, and code Playground

HTML

<div id="buttons">
    <a class="button" id="but1" href="#"></a>
    <a class="button" id="but2" href="#"></a>
    <a class="button" id="but3" href="#"></a>
</div>

CSS

.button {
    background: url(http://www.google.com/images/srpr/nav_logo71.png) no-repeat left top;
    display: block;
    float: left;
    height: 19px;
    width: 19px;
    }

#but1 {
    background-position: 0 -172px;
    }

#but1:hover {
    background-position: -20px -172px;
    }

#but2 {
    background-position: -80px -172px;
    }

#but2:hover {
    background-position: -100px -172px;
    }

#but3 {
    background-position: -120px -172px;
    }

#but3:hover {
    background-position: -140px -172px;
    }