Why does my :active selector lose its click event state on scale tranformation?
You can easily work around this
Make the content(button look) with another element in the button or anchor, and put the transform on the new element inside of the button. This way when you click the button, you get the transform and the js triggering since the actual button isn't shrinking
here is a simple example
document.getElementById('moreRecipes').addEventListener('click', function() {
alert("clicked");
});button.btn span {
text-transform: uppercase;
border: solid 1px #282828;
font-size: 11px;
line-height: 17px;
display: block;
}
button.btn:active span {
transform: scale(.95);
}<button id="moreRecipes" class="btn">
<span>Show more recipes</span>
</button>