JSFiddle - React, Tailwind, and code Playground

HTML

<p>
No down/click state.
</p>
<button>
<div class="state off">
off
</div>
<div class="state on">
on
</div>
<div class="state down">
down
</div>
</button>

<p>
Down/click state.
</p>
<button class="has-down">
<div class="state off">
off
</div>
<div class="state on">
on
</div>
<div class="state down">
down
</div>
</button>

<div id="log"/>

CSS

button {
  position:relative;
  background:transparent;
  border:none;
  height:50px;
  width:200px;
  cursor:pointer;
}

button .state { 
  position:absolute;
  width:100%;
  height:100%;
  display:none;
  top:0; left:0;
}

.state.off { background:green; display:block; }
.state.on { background:orange;}
.state.down { background:red; }

button:hover .state.off, button:hover .state.down {display:none;}
button:hover .state.on {display:block;}

button.has-down .state { pointer-events:none; }
button.has-down:active .state.on, button.has-down:active .state.off {display:none;}
button.has-down:active .state.down {display:block;}

#log {
  width:100%;
  border:1px solid grey;
  min-height:2em;
  margin-top:2em;
}

JavaScript

$('button').on('click',function(e){
	$('#log').html('clicked ' + new Date().getTime());
  throw new Error();
  return false;
});