用hsl()调明度最稳，只改亮度l值即可实现hover和active效果，避免rgb/十六进制手动计算的误差与不一致；transition须写在默认状态，伪元素遮罩更适配复杂背景。
直接用 hsl() 调明度最稳，不换色相、不破设计系统，改一行值就能出 hover 和 active 效果。
为什么别用 rgb() 或十六进制硬调颜色
手动算 #007bff 按下变暗 20% 得到 #0062cc？容易错，且深色按钮提亮、浅色按钮加深的逻辑会反着来。更麻烦的是：不同基础色对“变暗”的感知不一致（比如黄色变暗易发灰，蓝色变暗显稳），rgb() 没有语义，每次都要试。
用 hsl() 就简单了——只动第三个参数（亮度 l）：
-
hsl(210, 100%, 60%)→ hover 用hsl(210, 100%, 52%)（-8%） -
hsl(210, 100%, 60%)→ active 用hsl(210, 100%, 45%)（-15%） - 浅底色按钮（如
hsl(0, 0%, 95%)）则反过来：hover 加 5%，active 加 10%
:hover 和 :active 的 transition 必须写在默认状态里
很多人把 transition 写在 :hover 里，结果鼠标移出时动画失效。正确写法是：
立即学习“前端免费学习笔记（深入）”；
.btn {
background-color: hsl(210, 100%, 60%);
transition: background-color 0.2s ease;
}
.btn:hover {
background-color: hsl(210, 100%, 52%);
}
.btn:active {
background-color: hsl(210, 100%, 45%);
}
注意三点：
-
transition必须在默认类中声明，否则:active → default回退无动画 -
:active动画时间建议 ≤ 0.15s，太长像卡住；:hover可稍长（0.2–0.3s），给人响应感 - 别给
:active单独加transition，它会覆盖默认声明，导致 hover 移出失效
避免 hover 和 active 颜色区分不开
如果两者只差 3%–5% 明度，人眼几乎看不出点击反馈。实测有效区间：
- 深色系按钮（
l < 60%）：hover 减 6%–10%，active 减 12%–18% - 浅色系按钮（
l > 80%）：hover 加 4%–8%，active 加 10%–15% - 中性色（如灰色
hsl(0, 0%, 70%)）：hover 加 3%，active 减 5%，制造“提亮悬停、压暗点击”的错觉
顺带一提：:active 状态极短，纯靠颜色变化不够，建议叠加 transform: translateY(1px) 或 box-shadow: inset 增强按下感。
用伪元素模拟明暗层更灵活（适合复杂背景）
当按钮有渐变、图片或透明背景时，直接改 background-color 会破坏原有视觉。这时用 ::before 叠加遮罩更可控：
.btn {
position: relative;
}
.btn::before {
content: "";
position: absolute;
inset: 0;
border-radius: 6px;
background: rgba(0, 0, 0, 0.1);
opacity: 0;
transition: opacity 0.2s;
}
.btn:hover::before {
opacity: 1;
}
.btn:active::before {
background: rgba(0, 0, 0, 0.25);
opacity: 1;
}
关键点：
-
::before的z-index默认高于内容，无需额外设 - 用
rgba()控制遮罩强度，比改background-color更安全 - hover 和 active 共用一个伪元素，靠
background和opacity组合出层次，减少 DOM 节点
真正难的不是写出效果，而是让 hover 和 active 在不同屏幕、不同光照下都保持可分辨的反馈强度。明度差值、过渡时长、是否叠加位移——这些微小参数组合起来，才是用户感知“这个按钮活着”的全部依据。
