JSFiddle - React, Tailwind, and code Playground

HTML

<div class="button" title="Zoom In" onclick="return false;">
    <img src="http://files.softicons.com/download/web-icons/light-grey-square-icons-by-axialis-team/png/24/Zoom%20In.png" />
</div>

<div class="button disabled" title="Zoom In" onclick="return false;">
    <img src="http://files.softicons.com/download/web-icons/light-grey-square-icons-by-axialis-team/png/24/Zoom%20In.png" />
</div>

CSS

div.button  { 
    background: white;
    border: 2px solid #6C7B8B; 
    border-radius: 8px; 
    cursor: pointer; 
    display: inline-block;  
    clear: none;
    float: none; 
    height: 24px;  
    width: 24px;   
    padding: 0; 
    margin-bottom: 0px; 
    margin-left: 5px; 
    margin-right: 0px; 
    margin-top: 7px; 
    outline: none; 
    overflow: hidden; 
    vertical-align: top; 
}

div.button img {
    border-radius: inherit;
}

div.button:not(.disabled):hover { 
    border-color: #007FFF; 
}  

div.button:not(.disabled):active  { 
    left: 1px; 
    position: relative; 
    top: 1px; 
} 

div.button.disabled { 
    cursor: default; 
}
div.button.disabled img {
    filter: alpha(opacity=50); 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";   
    opacity: 0.50; 
    -moz-opacity: 0.50;
}