为什么我的:主动选择器在比例变换时失去其单击事件状态？

Question

我为网站设计了一个按钮,并试图添加transform: scale(0.95);一个click事件(使用:activateCSS选择器).

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"/>

如果用户单击按钮的边框,则:active状态会缩小图标,并且光标不再覆盖按钮,并且可能不再触发click事件.如果用户在scale(0.95)区域内单击,则会正常触发click事件.

我试图保持点击事件; 我试图应用一个看不见的:before面板但没有成功,因为input[type='submit']它不支持它,并且希望有人已经解决了这个问题.

编辑1月14日:现在使用input[type='submit']不能包含元素的问题重写了问题.

Answer 1

您可以轻松解决此问题

使用按钮或锚点中的另一个元素制作内容（按钮外观），并将转换放在按钮内部的新元素上。这样，当您单击按钮时，您会得到转换并触发 js，因为实际按钮没有缩小

这是一个简单的例子

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>