I have a .card that changes its scale when :active. But I don't want this rule to run if a button within this .card is clicked.

To better illustrate the situation, this is my current code:

.html:

<div class="card">
  <h1>Card</h1>
  
  <button>Click me</button>
</div>

.css:

.card {}

.card:active {
  transform: scale(0.9);
}

button {
  /** ? **/
}

To better illustrate the situation, here's a demo of what's going on: https://codepen.io/chiefGui/pen/BaJoVvg

I lack ideas on how to overcome this situation via HTML/CSS only - so, what would you do?

Note: The solution I'm looking for is a way to solve the problem without JavaScript interference (if possible at all).