使用CSS :active伪类可实现按钮点击时的视觉反馈，如背景变深和位移；配合:hover、:focus及transition可提升交互流畅度，移动端需注意响应延迟，建议结合tabindex或JavaScript增强效果。
在按钮点击反馈中使用 CSS :active 伪类，可以为用户提供清晰的交互提示。当用户按下鼠标左键或触摸屏幕上的按钮时，:active 样式会被触发，从而改变按钮的外观，模拟“按下”效果。
基本用法
给按钮添加 :active 伪类，定义点击瞬间的样式变化：
button:active {
background-color: #005a9e;
transform: translateY(1px);
}
这样，当按钮被按下时，背景颜色变深并略微下移，产生“按下去”的视觉反馈。
配合其他状态使用
为了完整地控制按钮的交互体验，通常将 :active 与 :hover、:focus 等状态结合使用：
立即学习“前端免费学习笔记（深入）”；
- :hover —— 鼠标悬停时的样式
- :focus —— 按钮获得焦点（如通过 Tab 键）时的样式
- :active —— 按钮被按下时的样式
button {
background-color: #007bff;
border: none;
color: white;
padding: 10px 20px;
transition: all 0.1s ease;
}
button:hover {
background-color: #0069d9;
}
button:active {
background-color: #005a9e;
transform: scale(0.98);
}
加入 transition 可使颜色和形变过渡更自然，提升用户体验。
移动端适配注意
在移动设备上，:active 可能因浏览器默认行为而响应延迟或不明显。建议确保元素可聚焦或使用 JavaScript 辅助增强反馈：
- 为 div 按钮添加 tabindex 属性使其可触发 :active
- 避免完全依赖 :active 做关键反馈，可结合 class 切换来实现更稳定的点击效果
