按钮点击无反馈需检查cursor和:active是否被覆盖，显式定义:active样式并设置cursor:pointer；文字居中应优先用padding而非line-height；safari圆角发虚可加backface-visibility:hidden；禁用态须同步调整opacity、cursor及背景表现。
按钮点击没反馈？先检查 cursor 和 :active 是否被覆盖
很多“样式好看但点不动”的按钮，其实根本没触发视觉反馈。浏览器默认的 :active 状态在某些 CSS 重置库（比如 Normalize.css 或某些 UI 框架）里会被清掉，或者被更高优先级的 :hover 规则意外覆盖。
- 务必显式定义
button:active { transform: scale(0.98); }或background-color变化，别依赖默认行为 - 确保
cursor: pointer设置在button或[role="button"]上，否则鼠标悬停时无手型提示 - 如果用了
pointer-events: none做禁用态，记得配合opacity: 0.6和cursor: not-allowed，否则用户会误以为能点
文字居中总偏移？注意 line-height 和 padding 的协同关系
纯靠 line-height 垂直居中在按钮里风险很大——字体渲染差异、内联元素换行、甚至不同系统字体度量都会导致文字上下浮动。真正稳定的方式是用 padding 控制高度，让内容自然居中。
- 推荐写法：
padding: 8px 16px;+height: auto;，而不是height: 32px; line-height: 32px; - 若必须固定高度（如和输入框对齐），用
display: flex; align-items: center; justify-content: center;更可靠 - 避免在按钮里用
vertical-align，它对块级按钮无效，只影响行内元素
圆角按钮在 Safari 里边缘发虚？加 backface-visibility: hidden
Safari 对带圆角（border-radius）+ 背景渐变或阴影的按钮，有时会渲染出轻微锯齿或模糊边缘，尤其在 Retina 屏上。这不是 bug，是 WebKit 渲染层叠优化导致的亚像素问题。
- 在按钮 CSS 中加一行：
backface-visibility: hidden;即可强制启用硬件加速并修复渲染 - 不要滥用：仅对
border-radius > 4px且有background-image或box-shadow的按钮加该属性 - 如果按钮还用了
transform: translateZ(0)，两者效果重复，留一个就行
禁用态颜色太浅看不清？别只改 color，要同步调 opacity 和 background
只设 button:disabled { color: #999; } 是常见误区。禁用态需要传递“不可交互”信号，单靠文字变灰远远不够，用户可能仍尝试点击。
- 标准做法：
button:disabled { opacity: 0.5; cursor: not-allowed; }，同时确保背景色也随 opacity 变暗（避免背景色过亮盖过文字） - 如果按钮用的是渐变背景，
opacity会让整个渐变变灰，此时建议改用filter: grayscale(70%) brightness(0.9);替代 - 切记：禁用按钮不能响应
click事件，JS 层也要加if (btn.disabled) return;防止逻辑误触发
圆角、阴影、禁用反馈这些细节，往往不是“做完就算”，而是用户第一次点击时就决定是否信任这个界面。样式再酷，点下去没反应，或者点了两次才触发，体验就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
