Tengo una .card que cambia su escala cuando :active . Pero no quiero que esta regla se ejecute si se hace clic en un button dentro de esta .card .

Para ilustrar mejor la situación, este es mi código actual:

.html :

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

.css :

 .card {} .card:active { transform: scale(0.9); } button { /** ? **/ }

Para ilustrar mejor la situación, aquí hay una demostración de lo que está pasando: https://codepen.io/chiefGui/pen/BaJoVvg

Me faltan ideas sobre cómo superar esta situación solo a través de HTML/CSS, entonces, ¿qué harías?

Nota: La solución que estoy buscando es una forma de resolver el problema sin la interferencia de JavaScript (si es posible).