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>

Tags:

Html

Css