JSFiddle - React, Tailwind, and code Playground

by jackrugile

HTML

<ul id="buttons"> 
    <li class="close"><a href="#"></a></li> 
    <li class="plus"><a href="#"></a></li> 
    <li class="minus"><a href="#"></a></li> 
    <li class="previous"><a href="#"></a></li> 
    <li class="next"><a href="#"></a></li> 
    <li class="heart"><a href="#"></a></li> 
</ul>

CSS

/*Buttons*/
#buttons {
    margin:0;
    padding: 0;
}
    
#buttons li {
    list-style: none;
    display:inline;
    position:relative;
    width:23px;
}
    
#buttons li a {
    background: url('http://louisbullock.co.cc/files/buttonsprites.png') no-repeat;
    display:inline-block;
    height:23px;
    width:23px;
}

#buttons .close a { background-position: 0 0; }
#buttons .plus a { background-position: -23px 0; }
#buttons .minus a { background-position: -46px 0; }
#buttons .previous a { background-position: -69px 0; }
#buttons .next a { background-position: -92px 0; }
#buttons .heart a { background-position: -115px 0; }

#buttons .close a:hover { background-position: 0 -23px; }
#buttons .plus a:hover { background-position: -23px -23px; }
#buttons .minus a:hover { background-position: -46px -23px; }
#buttons .previous a:hover { background-position: -69px -23px; }
#buttons .next a:hover { background-position: -92px -23px; }
#buttons .heart a:hover { background-position: -115px -23px; }

/* Use this for the gray state, I have it as active state for now */
#buttons .close a:active { background-position: 0 -46px; }
#buttons .plus a:active { background-position: -23px -46px; }
#buttons .minus a:active { background-position: -46px -46px; }
#buttons .previous a:active { background-position: -69px -46px; }
#buttons .next a:active { background-position: -92px -46px; }
#buttons .heart a:active { background-position: inherit -46px; }