CSS-覆盖到某个状态和从某个状态转换

Question

假设我有一个带有转换的简单按钮：

<button id="myBtn" type="button">Button A</button>

#myBtn {
transition: background-color 1s;
}

上面的CSS我无法触摸，因为其他javascript驱动的效果需要转换。但我想在按下时为这个按钮分配一个不同的bg，我希望这种颜色的变化不会发生过渡。很自然，这个：

#myBtn {
transition: background-color 1s;
}
#myBtn:active {
transition: background-color 0s;
background-color: red;
}

但这当然只会在按钮进入:active状态时禁用转换，而不是从中返回。换句话说，当按下按钮时，原始颜色会以1s的转换恢复，而我希望它立即恢复。所以我的问题是，有没有一种方法可以覆盖CSS中到特定状态和从特定状态到特定状态的转换？

p.S.

我知道我可以在JS中做到这一点，比如：

btn.onmouseup(() => {
btn.style.transition = "background-color 0s";
setTimeout(() => btn.style.transition = "", 10);
// Actually this doesn't even work because DOM can't react in 10ms
});

我只是想知道这是否可以用一种更易于维护、不那么难看的方式(即纯HTML&CSS(来完成。

Answer 1

您可以添加一个只有在按钮处于活动状态时才可见的视觉覆盖：

#myBtn {
transition: background 1s;
position: relative;
}
#myBtn:before {
content: "Button";
visibility: hidden;
position: absolute;
top:0;bottom:0;left:0;right:0;
}
#myBtn:active:before {
visibility: visible;
background-color: red;
}

<button id="myBtn">Button</button>