纯CSS实现按钮悬停变色动画只需在默认状态设置transition，如button{transition:background-color 0.3s ease,color 0.3s ease;}，hover中仅改颜色值；避免对background简写过渡，移动端需兼顾:active并优化触发。
按钮颜色变化加 transition 就够了
纯 CSS 实现按钮悬停变色动画，核心就是用 transition 控制颜色属性的过渡行为。不需要 JS，也不用额外包裹元素或伪类 hack。
transition 必须写在默认状态上，不是 :hover
很多人把 transition 写在 :hover 里，结果鼠标移入有动画、移出却瞬间跳回——这是因为移出时样式还原没触发过渡。正确做法是把 transition 放在按钮的常态规则中：
button {
background-color: #007bff;
color: white;
transition: background-color 0.3s ease, color 0.3s ease;
}
button:hover {
background-color: #0056b3;
color: #f8f9fa;
}
-
background-color和color都要单独列出，否则只写all 0.3s可能触发不必要的重绘 - 持续时间推荐
0.2s–0.4s：太短像没动，太长让人误以为卡顿 -
ease是默认缓动，平滑自然；想更轻快可用ease-in-out，想开头慢结尾快用ease-out
别对 background 简写属性做过渡
如果按钮用了渐变背景或带边框，直接写 transition: background 0.3s 很可能失效。浏览器无法插值两个不同格式的 background 值（比如从纯色到线性渐变）。
- 改用具体子属性：
background-color、border-color、box-shadow等分别过渡 - 渐变背景想动？得用
background-position配合background-size模拟，或者改用@property（但兼容性差） - 用
devtools检查 computed 样式，确认实际变化的属性名是否被过渡规则覆盖
移动端点击反馈也要考虑 :active
手机端没有 :hover，靠 :active 做按下反馈。但它的触发时机短且不稳定，建议合并处理：
立即学习“前端免费学习笔记（深入）”；
button {
transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
button:hover,
button:active {
background-color: #0056b3;
}
- 用
cubic-bezier(0.4, 0, 0.2, 1)替代ease，更接近 Material Design 的响应节奏 -
:active不加过渡时间，避免点击后颜色“卡住” - 真机测试时注意 iOS Safari 对
:active的延迟，默认要等 touchend 才触发，可加cursor: pointer或touch-action: manipulation优化
transparent、currentcolor 或自定义属性未初始化，动画会直接跳变。这点容易被忽略。 
