按钮点击无响应常因type属性默认为submit导致表单提交，应显式设type="button"；样式失效需覆盖user agent默认样式；无障碍需用aria-pressed和role；移动端需满足44×44px触控热区。

按钮点击后不触发事件？检查 type 属性是否被忽略

HTML 中的 默认是 type="submit"，放在

里会自动提交表单——这常导致页面刷新、事件没执行。不是 JS 写错了，而是按钮“干了别的事”。

• 显式写上 type="button"，避免意外提交
• 如果真要提交表单，确认 JS 事件监听器用了 event.preventDefault()
• type="reset" 很少用，但一旦误设，点一下清空所有表单字段，排查时容易漏看

按钮样式失效？优先级和继承链比想象中复杂

用 CSS 给 button 加背景色、圆角、阴影，结果在某些浏览器或框架下被重置得很彻底——不是你写得不对，是用户代理样式（user agent stylesheet）和 CSS 重置逻辑在暗处打架。

• 必须覆盖 button 的默认 border、padding、background 和 font，一行不够就写全
• 别只写 :hover，漏掉 :active 和 :focus-visible，键盘用户会卡住
• 若用 Tailwind 或 Bootstrap，查清它是否对 button 做了全局 appearance: none 或 all: unset，这会让你的自定义样式直接失效

无障碍支持被跳过？aria-pressed 和 role 不是可选项

切换类按钮（如“静音”“展开/收起”）如果只靠 class 切换视觉状态，屏幕阅读器完全感知不到当前状态——用户听到“按钮”，却不知道它是开还是关。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 用 role="button" 显式声明语义（尤其对
  或 模拟的按钮）
• 切换状态时同步更新 aria-pressed="true/false"，而不是只改 class
• 禁用状态必须同时设 disabled 属性（而非仅加 opacity: 0.5），否则键盘仍能聚焦、屏幕阅读器仍会宣布“可交互”

移动端点击区域太小？min-width 和 padding 要一起调

设计稿上按钮看着够大，真机一点就失焦——iOS Safari 和 Android Chrome 对可点击区域有最小物理尺寸要求（约 44×44px），CSS 宽高只是内容区，不等于触控热区。

• 给 button 设 min-width: 44px + min-height: 44px，再配合足够 padding（比如 0.75rem）
• 避免用 font-size: 0 + line-height 控制高度，这会让文字不可读、缩放失效
• 如果按钮内含图标，确保图标 SVG 有 width 和 height 属性，否则在某些安卓 WebView 中渲染异常小

实际项目里，最常出问题的不是“怎么让按钮好看”，而是“为什么点了没反应”“为什么读屏器念错”“为什么手指总点歪”。这些细节堆叠起来，才真正决定按钮能不能被所有人稳定使用。