JSFiddle - React, Tailwind, and code Playground

HTML

<div class="button" id="zoom"  
style="background-image: url('http://files.softicons.com/download/web-icons/light-grey-square-icons-by-axialis-team/png/24/Zoom%20In.png'); margin-left: 5px;" title="Zoom In" onclick="void(0);"></div>

<div class="button on" id="zoom"  
style="background-image: url('http://files.softicons.com/download/web-icons/light-grey-square-icons-by-axialis-team/png/24/Zoom%20In.png'); margin-left: 5px;" title="Zoom In" onclick="void(0);"></div>

<div class="button disabled" id="zoom"  
style="background-image: url('http://files.softicons.com/download/web-icons/light-grey-square-icons-by-axialis-team/png/24/Zoom%20In.png'); margin-left: 5px;" title="Zoom In" onclick="void(0);"></div>

CSS

div.button, div.button:hover
  { 
    background: none; 
    border: 2px solid #6C7B8B; 
    border-radius: 8px; 
    clear: none; 
    color: transparent; 
    cursor: pointer; 
    display: inline-block; 
    filter: alpha(opacity=100); 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
    float: none; 
    height: 24px; 
    margin-bottom: 0px; 
    margin-left: 3px; 
    margin-right: 0px; 
    margin-top: 7px; 
    opacity: 1; 
    -moz-opacity: 1; 
    outline: none; 
    overflow: hidden; 
    padding: none; 
    vertical-align: top; 
    width: 24px; 
    position: relative;
  } 

  div.button:active 
  { 
    left: 1px; 
    position: relative; 
    top: 1px; 
  } 

  div.disabled:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    background: rgba(255,255,255,0.7);
    border-radius: 6px;
  }

 
  div.disabled:active 
  { 
    left: 0px; 
    position: relative; 
    top: 0px; 
  } 

  div.on, div.on:hover 
  { 
    border: 2px solid #007FFF; 
  }