通过 linear-gradient 和 transition 实现按钮背景渐变悬停效果；2. hover 时反转渐变颜色顺序触发过渡；3. 利用 background-size 和 background-position 创造滑动渐变动画；4. 注意兼容性，确保渐变结构一致且 transition 写在默认状态。
按钮背景渐变配合平滑过渡效果，能显著提升用户交互体验。通过结合 linear-gradient 和 transition，你可以实现鼠标悬停时背景色自然流动的效果。
1. 设置基础按钮样式
先定义一个基本的按钮，设置尺寸、边框、圆角和初始文字样式：
.btn {
padding: 12px 24px;
font-size: 16px;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
background: linear-gradient(90deg, #3498db, #2980b9);
transition: background 0.4s ease;
}
说明： 使用 linear-gradient 创建从左到右的蓝色渐变背景，并添加 transition 让背景变化更柔和。
2. 添加悬停状态的渐变变化
当鼠标移上按钮时，改变渐变方向或颜色位置，制造“流动”感：
.btn:hover {
background: linear-gradient(90deg, #2980b9, #3498db);
}
说明： 悬停时颜色顺序反转，配合之前设置的 transition，浏览器会尝试插值渐变变化，实现平滑过渡。
3. 提高兼容性与流畅度技巧
CSS 渐变本身不是可动画属性，直接过渡 background 在某些浏览器中可能不生效或跳帧。以下是几种增强方案：
立即学习“前端免费学习笔记（深入）”；
- 使用伪元素模拟渐变滑动：通过位移伪元素实现视觉上的渐变动效。
- 借助 background-position 动画：让渐变位置移动，而不是改变颜色。
示例：利用 background-position 实现滑动渐变效果
.btn-slide {
background: linear-gradient(90deg, #3498db 0%, #2980b9 50%, #3498db 100%);
background-size: 200% 100%;
transition: background-position 0.4s ease;
}
.btn-slide:hover {
background-position: 100% 0;
}
原理： 渐变宽度设为 200%，初始显示左半部分；悬停时将背景定位到右侧，形成“滑入”效果。
4. 注意事项
- 确保
transition属性写在默认状态，而非 hover 中。 - 尽量使用相同结构的渐变（如都是两个颜色、相同角度）以提高过渡成功率。
- 测试不同浏览器表现，必要时用 JavaScript 或伪元素补足。
linear-gradient 与 transition，能让按钮更具动感又不失性能。 
