通过CSS的transition属性与:hover伪类配合，可实现按钮文字颜色平滑过渡。首先定义按钮默认样式，设置color和transition属性（如transition: color 0.3s ease），再在:hover状态中指定目标颜色（如#0056b3），鼠标悬停时颜色将自动平滑变化，移出时反向恢复。还可扩展transition以同时控制边框或背景色，提升视觉效果。关键在于正确配置过渡属性与状态颜色。
想让按钮在鼠标悬停时平滑地改变文字颜色，可以用CSS的 transition 属性配合 :hover 伪类来实现。关键在于设置颜色变化的过渡效果，使视觉体验更自然。
1. 基础结构：定义按钮样式
先创建一个普通的按钮元素，设置默认的文字颜色和一些基本样式：
.hover-btn {
color: #007bff;
background: none;
border: 2px solid #007bff;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
outline: none;
}
2. 添加颜色过渡效果
使用 transition 控制 color 属性的变化过程。比如设置颜色在0.3秒内线性过渡：
.hover-btn {
color: #007bff;
transition: color 0.3s ease;
}
transition 的参数说明：
立即学习“前端免费学习笔记（深入）”；
- color：指定只对文字颜色做过渡
- 0.3s：过渡持续时间（可改为0.5s等）
- ease：缓动函数，也可用 linear、ease-in-out 等
3. 定义悬停状态的颜色
通过 :hover 改变鼠标悬停时的文字颜色，浏览器会自动应用之前设定的过渡：
.hover-btn:hover {
color: #0056b3;
}
当鼠标移入按钮，文字颜色会从 #007bff 平滑变为 #0056b3；移出时也会反向过渡回去。
4. 可选增强：同时过渡边框或背景
如果希望文字和边框一起变化，可以扩展 transition 属性：
.hover-btn {
color: #007bff;
border-color: #007bff;
transition: color 0.3s ease, border-color 0.3s ease;
}
.hover-btn:hover {
color: #0056b3;
border-color: #0056b3;
}
基本上就这些。只要设置好初始颜色、目标颜色和 transition 规则，就能实现流畅的文字颜色悬停过渡。不复杂但容易忽略细节，比如忘记加 transition 或写错属性名。
