JSFiddle - React, Tailwind, and code Playground

HTML

<div id="buttons">
    <a id="free-consultation" href="" title="Free consultation" class='button'></a>
    <a id="retain-our-firm" href="" title="Retain our firm" class='button'></a>
    <a id="recieve-a-quote" href="" title="Recieve a quote" class='button'></a>
    <span class='special'></span>
</div>

CSS

#buttons .button{
    display:block;
    position:relative;
    float:left;
    width:250px;
    height:80px;
    padding-left:20px;
    background-image:url(http://www.websitesforlawyers.us/images/valid_xhtml_code_icon.png);
    background-repeat:no-repeat;
}

#free-consultation:hover{
    background-position:0px -10px;
}

#retain-our-firm{
    background-position:0px -20px;
}
#retain-our-firm:hover{
    background-position:0px -30px;    
}

#recieve-a-quote{
    background-position:0px -40px;    
}
#recieve-a-quote:hover{
    background-position:0px -50px;    
}