通过CSS的:hover、:focus、:active伪类可实现按钮在悬停、聚焦和按下时的颜色变化，提升交互性与可访问性。.my-btn设置基础样式并添加transition实现平滑过渡；:hover改变背景色以提示可操作；:focus保留outline或自定义高亮边框确保键盘导航可见；:active进一步调整背景色并配合transform模拟按下效果。完整示例包含所有状态且注重细节，如outline-offset避免布局偏移。合理应用三者能显著增强用户体验，关键在于保持视觉连贯并兼顾无障碍需求。
要让按钮在不同交互状态下显示不同的颜色，可以通过CSS设置 :hover、:active 和 :focus 伪类。这些状态分别对应鼠标悬停、鼠标按下和键盘焦点（如Tab切换）时的样式。
基础按钮结构
假设你有一个简单的HTML按钮：
<button class="my-btn">点击我</button>:hover 状态（鼠标悬停）
当用户将鼠标指针移到按钮上时触发。常用于提示可点击或增强视觉反馈。
.my-btn:hover {background-color: #0056b3;
}
:focus 状态（获得焦点）
当用户通过Tab键导航到按钮，或使用JavaScript触发focus时生效。对可访问性很重要。
立即学习“前端免费学习笔记（深入）”；
.my-btn:focus {
outline: 2px solid #0077cc;
background-color: #006dcd;
}
注意：不要移除默认outline，除非你提供替代的视觉提示，否则会影响键盘用户的体验。
:active 状态（鼠标按下）
当用户点击并按住按钮时触发，通常用于模拟“按下”效果。
.my-btn:active {background-color: #004080;
transform: translateY(1px);
}
完整示例代码
.my-btn {background-color: #007bff;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.2s ease;
}
.my-btn:hover {
background-color: #0056b3;
}
.my-btn:focus {
outline: 2px solid #0077cc;
outline-offset: 2px;
}
.my-btn:active {
background-color: #004080;
}
加上 transition 可以让颜色变化更平滑，提升用户体验。
基本上就这些。合理使用这三种状态，能显著提升按钮的交互感和可用性。关键是保持视觉一致性，同时兼顾可访问性。不复杂但容易忽略细节。
