Why does my :active selector lose its click event state on scale tranformation?

Issue

I designed a button for a website and tried to add transform: scale(0.95); on a click event (using the :activate CSS selector).

a.btn, input[type="submit"].btn, label.btn, button.btn {
  text-transform: uppercase;
  border: solid 1px #282828;
  font-size: 11px;
  line-height: 17px;
}
a.btn:active, input[type="submit"].btn:active, label.btn:active, button.btn:active {
  transform: scale(0.95);
}

<input type="submit" value="Show more recipes" class="btn"/>

If the user clicks on the border of the button, the :active state reduces the icon and the cursor no longer covers the button, and probably no longer triggers the click event. If the user clicks inside the scale(0.95) area, the click event is triggered as normal.

I am trying to keep the click event; I tried to apply an invisible :before panel with no success, since input[type='submit'] does not support it, and was hoping someone solved this issue already.

Edit Jan 14th: Issue has been rewritten now using input[type='submit'] which cannot contain elements.

Solution

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>

Answered By - Huangism