使用CSS的:hover和transition属性可实现按钮背景颜色平滑渐变。首先创建button元素，设置默认背景色、文字颜色、边框、圆角等样式，并通过transition定义背景色变化的持续时间（如0.4秒）和缓动函数。当鼠标悬停时，利用:hover伪类改变背景色值，由于过渡效果存在，颜色将平滑切换而非突变。若需线性渐变，可用linear-gradient定义初始和悬停状态的渐变角度与颜色 stop，但需注意浏览器对渐变过渡的支持有限，通常表现为整体淡入淡出；可通过调整background-position实现滑动渐变动画。推荐过渡时间设为0.3–0.5秒以保证自然响应。此方法无需JavaScript，仅靠CSS即可提升交互体验。
想让按钮在鼠标悬停时实现背景颜色的平滑渐变，是前端开发中常见的视觉优化需求。通过简单的 CSS :hover 和 transition 属性，就能轻松实现这个效果，无需 JavaScript。
1. 基础按钮结构
先创建一个基本的按钮 HTML 结构：
<button class="gradient-btn">悬停试试</button>2. 设置初始背景与过渡效果
使用 CSS 定义按钮的默认样式，并添加 transition 来控制颜色变化的速度和缓动方式：
.gradient-btn {background: #007bff;
color: white;
border: none;
padding: 12px 24px;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
transition: background 0.4s ease;
}
关键点： transition 属性中的 background 0.4s ease 表示背景颜色在 0.4 秒内以缓入缓出的方式变化。
立即学习“前端免费学习笔记（深入）”；
3. 定义悬停时的背景色
当鼠标悬停时，将按钮背景切换到另一种颜色，比如更深的蓝色：
.gradient-btn:hover {background: #0056b3;
}
由于设置了 transition，颜色不会突变，而是平滑过渡，形成“渐变”视觉效果。
4. 进阶：使用线性渐变背景
如果想用真正的渐变（如从蓝到深蓝），可以这样写：
.gradient-btn {background: linear-gradient(45deg, #007bff, #00aaff);
transition: background 0.5s ease;
}
.gradient-btn:hover {
background: linear-gradient(45deg, #0056b3, #0080e6);
}
注意：纯 CSS 中对 linear-gradient 的过渡支持有限，颜色会整体淡入淡出，而不是逐段渐变。若需更复杂的动画，可结合 background-position 实现滑动渐变效果。
基本上就这些。掌握 :hover 和 transition 的配合，就能让按钮交互更生动，提升用户体验。不复杂但容易忽略细节，比如过渡时间太短会显得突兀，太长又不够灵敏，0.3–0.5 秒是比较自然的选择。
