JSFiddle - React, Tailwind, and code Playground

HTML

<button><em class='leftImage'></em>Download<em class='rightImage' ></em></button>
<br /><br />
Hover to see other image
<br />
<button class="hov"><em class='leftImage'></em><em class='rightImage' ></em> Download &nbsp;</button>

CSS

button{
    margin: 0px;
    padding: 0px;
    font-family:Lucida Sans MS, Tahoma;
    background-color:white;
    font-size: 12px;
    color: #000; 
    white-space:nowrap;
    width:auto;
    overflow:visible;
    
    /*new code */
    height:35px;
    width: 120px;
    text-align:right;
    position:relative;
}

button em{
    vertical-align:middle;
    display:inline-block;
    width:29px;
    height:30px;
    background-image: url(http://imgur.com/download/vICywDr/); 
    repeat:none;
}

button em.leftImage{
    background-position: -28px, 0;
}

button em.rightImage{
    background-position: 0, 0;
}

button.hov {width:100px;}

button.hov em {
  position:absolute;
  left:2px;
  top:1px;
}
button.hov:hover em.rightImage{
    display:none;
}