通过 CSS 的 transition 和：active 伪类实现按钮点击颜色平滑过渡，首先设置 background-color 的 0.3 秒缓动动画，鼠标按下时背景色由 #007bff 渐变至#0056b3，再配合 hover 悬停效果提升交互体验。
按钮点击后颜色平滑过渡，可以通过 CSS 的 transition 和 :active 伪类来实现。关键是设置背景色（background-color）的过渡效果，让颜色变化更自然。
1. 基础结构：HTML 按钮
先写一个简单的按钮元素：
<button class="smooth-btn"> 点击我 </button>2. 设置背景色过渡动画
使用 transition 属性定义 background-color 的变化时长和缓动效果：
.smooth-btn {
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.smooth-btn:active {
background-color: #0056b3;
}
说明：
- transition: background-color 0.3s ease 表示背景色在 0.3 秒内平滑变化，使用默认缓动效果
- :active 是鼠标按下时的状态，颜色会逐渐变深
3. 可选增强：添加 hover 效果
为了让交互更完整，也可以加入 hover 状态：
.smooth-btn:hover {
background-color: #0069d9;
}
这样按钮在悬停和点击时都有流畅的颜色过渡。 基本上就这些，不复杂但容易忽略细节。只要确保 transition 正确绑定到 background-color，再配合状态伪类就能实现丝滑点击反馈。
