为何修改按钮边框样式会影响其悬停与点击时的背景色？

在Chrome及其他浏览器中，未设置样式的按钮在悬停时背景色会比默认色略深，按下时则比默认色略浅。但如果修改按钮的边框样式（例如添加border-radius），悬停和点击时背景色便不再变化，这是为什么？

示例代码 #

CSS

button { padding: 1ch 2ch; }
.border-radius { border-radius: 1rem; }

HTML

<button type="button">Border Unstyled</button>
<button class="border-radius" type="button">Border Radius Applied</button>

原因解析 #

• 原生按钮的悬停、点击状态样式属于浏览器内置的UA样式表，且和按钮默认的边框、背景等基础样式绑定在一起。
• 当你修改border-radius这类会改变按钮基础外观的样式时，浏览器会判定该按钮已被自定义样式覆盖，自动停用原生的交互状态样式（包括悬停、点击的背景色变化）。
• 本质上是浏览器的一种处理逻辑：只要打破了按钮的默认外观，就不再套用原生交互效果，需要你通过CSS伪类（:hover、:active）自行定义这些状态的样式。

内容的提问来源于stack exchange，提问作者Andrzej Polachow