如何使用CSS设置按钮颜色_hover active focus状态应用

通过CSS的:hover、:focus、:active伪类可实现按钮在悬停、聚焦和按下时的颜色变化，提升交互性与可访问性。.my-btn设置基础样式并添加transition实现平滑过渡；:hover改变背景色以提示可操作；:focus保留outline或自定义高亮边框确保键盘导航可见；:active进一步调整背景色并配合transform模拟按下效果。完整示例包含所有状态且注重细节，如outline-offset避免布局偏移。合理应用三者能显著增强用户体验，关键在于保持视觉连贯并兼顾无障碍需求。

要让按钮在不同交互状态下显示不同的颜色，可以通过CSS设置 :hover、:active 和 :focus 伪类。这些状态分别对应鼠标悬停、鼠标按下和键盘焦点（如Tab切换）时的样式。

基础按钮结构

假设你有一个简单的HTML按钮：

点击我

: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 可以让颜色变化更平滑，提升用户体验。

基本上就这些。合理使用这三种状态，能显著提升按钮的交互感和可用性。关键是保持视觉一致性，同时兼顾可访问性。不复杂但容易忽略细节。