答案：通过为:hover和:active设置不同颜色及视觉效果可区分按钮状态。具体描述：:hover在鼠标悬停时触发，常用于提示交互性；:active在鼠标按下时生效，模拟点击反馈。若两者颜色相近，用户难以识别状态变化，建议采用对比明显的颜色，如悬停用#0056b3、点击用#003d82。同时可结合box-shadow、transform: translateY(1px)和transition等增强视觉层次，并遵循LVHAR顺序书写CSS规则，避免样式覆盖问题。

在CSS中，:hover 和 :active 是两个不同的伪类，分别表示鼠标悬停和鼠标按下（激活）的状态。为了让按钮在这两种状态下颜色有明显区分，你需要为它们设置不同的颜色值。

理解 hover 与 active 的区别

- :hover：当鼠标指针移动到元素上时触发，常用于提示用户可交互。
- :active：当元素被鼠标点击并按住时生效，松开后状态消失。

如果两者颜色相同或太接近，用户难以感知点击反馈。因此建议使用对比更明显的颜色来增强体验。

如何设置不同颜色

直接在CSS中分别为 :hover 和 :active 定义不同的背景色或文字色：

button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}
button:hover {
background-color: #0056b3; / 悬停时更深的蓝色 /
}
button:active {
background-color: #003d82; / 点击时最深的蓝色，模拟“按下”感 /
}

提升视觉反馈的小技巧

除了颜色变化，还可以结合以下方式增强区分度：

• 轻微改变按钮的边框或阴影，例如 box-shadow: inset 0 2px 4px rgba(0,0,0,0.2); 在 :active 时使用
• 添加过渡动画（transition），让颜色变化更自然
• 适当调整按钮的垂直位置，比如 :active 时用 transform: translateY(1px); 模拟下压效果

避免常见问题

确保选择器顺序正确（推荐 LVHAR 顺序）：

button { }
button:hover { }
button:active { }

如果把 :active 写在 :hover 前面，可能被覆盖导致不生效。

基本上就这些，合理搭配颜色和样式，能让用户清楚感知按钮的不同状态。