JSFiddle - React, Tailwind, and code Playground
HTML
<button>TEST</button>
<br>
<br>
<a href='#'>Change button's :active background-color to yellow</a>
CSS
button {
background-color: blue;
color: white;
font-size: 200%;
}
button:active {
background-color: red;
}
JavaScript
$('a').click(function (e) {
e.preventDefault();
$('button').addClass('active-style');
});
$(document).on('mousedown mouseup', function (e) {
var color = (e.type === 'mousedown' && $(e.target).hasClass('active-style')) ? 'yellow' : '';
$('button.active-style').css('background-color', color);
});