如何仅用CSS动态加深按钮hover状态背景色且不影响文字颜色

原有写法的问题 #

你之前使用filter: brightness()无法满足需求的核心原因是：CSS滤镜是对整个元素的最终渲染结果做统一处理，元素内的文字、边框、图标、子元素都会被同步调整明暗，哪怕你在hover状态下单独指定color属性，文字依然会被滤镜作用，无法实现仅调整背景的效果。

全局生效的实现方案 #

直接把以下规则写入globals.css即可，无需修改每个按钮单独的background-color配置，不管按钮本身用纯色、渐变色作为背景，都能自动实现hover加深效果，且完全不影响文字显示：

button {
  position: relative;
  isolation: isolate;
  transition: 300ms;
  /* 保留你原有按钮的所有基础样式，background可任意设置，无需额外适配 */
}

button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  border-radius: inherit;
  transition: inherit;
  z-index: -1;
}

button:hover::after {
  opacity: 0.2; /* 调整该值控制暗化程度：数值越大背景越深，0.2对应压暗20%，和brightness(80%)的背景效果一致 */
}

方案特性 #

• 无侵入：不需要修改现有按钮的样式定义，全局写入后自动对所有按钮生效
• 效果精准：暗化层仅作用于按钮背景区域，文字、图标、边框、投影都不会被改动
• 适配性强：自动继承按钮的圆角、过渡时长配置，不会出现边缘错位、动画不同步的问题
• 可控性强：仅需调整伪元素的opacity数值，就能统一控制全站所有按钮的hover暗化程度

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