按钮悬停变色需在默认状态设transition并指定color/background-color等属性，推荐搭配transform缩放增强反馈，避免使用transition:all以防抖动。
直接给按钮设置 transition，并配合 :hover 改变颜色，就能实现平滑的悬停变色效果。关键在于过渡属性要写在默认状态（非 hover），且指定要过渡的 CSS 属性（如 color、background-color）和持续时间。
基础写法：单色背景 + 文字变色
这是最常用也最稳妥的方式，适合纯色按钮：
button {
background-color: #4285f4;
color: white;
transition: background-color 0.3s ease, color 0.3s ease;
}
<p>button:hover {
background-color: #3367d6;
color: #e8f0fe;
}</p>
说明：
- transition 写在默认状态，确保进入和离开都有动画
- 同时过渡多个属性时，用逗号分隔
- ease 是默认缓动函数，也可换为 linear、ease-in-out 等
进阶技巧：渐变背景 + 阴影过渡
如果按钮用了 background: linear-gradient()，注意浏览器对渐变的过渡支持有限，建议改用伪元素或切换预设色值：
- 推荐做法：定义两套明确的渐变色，用
transition: background 0.35s cubic-bezier(0.4, 0, 0.2, 1) - 更可靠方案：用
background-color过渡，再叠加box-shadow: 0 2px 8px rgba(0,0,0,0.15)并一起过渡 - 避免写
transition: all 0.3s—— 它会过渡所有可变属性（包括outline、border等），可能引发意外抖动
兼容性与性能提醒
现代浏览器均支持 transition，但要注意几点：
-
background-color和color是 GPU 加速友好的属性，动画流畅 - 避免对
width、height、left、top等触发布局重排（layout）的属性做过渡，否则卡顿 - 移动端需额外加
cursor: pointer，确保悬停态能被识别（部分 iOS Safari 对:hover支持较弱）
一键增强：添加轻微缩放 + 变色
让按钮更有交互反馈，只需增加 transform：
button {
transition: background-color 0.25s, color 0.25s, transform 0.25s;
}
<p>button:hover {
background-color: #2a56c6;
color: white;
transform: scale(1.03);
}</p>
注意：transform 和 opacity 是高性能属性，优先选用；缩放幅度建议控制在 1.02–1.05 之间，太大会显得突兀。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
