button 的 type 属性必须显式声明，否则默认为 submit，易导致表单意外提交；纯交互按钮应设为 type="button"；无障碍需用 aria-hidden 或 aria-label 补充图标语义；禁用态须强化视觉反馈与交互提示。

button 元素的 type 属性必须显式声明

不写 type 属性时，浏览器默认为 type="submit" —— 这在表单内极易引发意外提交。哪怕只是个纯交互按钮（比如展开菜单、触发弹窗），也得明确写成 type="button"。

• 表单中所有未声明 type 的 <button> 都会尝试提交表单，即使没写 onclick
• type="reset" 会清空整个表单字段，慎用；多数场景下应避免
• 使用 type="button" 后，JavaScript 绑定事件才真正“干净”，不会被表单默认行为干扰

用 CSS 控制 button 状态比 JS 切 class 更轻量

悬停、聚焦、禁用等状态，优先用伪类而非 JS 动态加 class。CSS 原生支持更稳定，也避免了事件监听器冗余和 class 名冲突风险。

• :hover 和 :focus 可以同时生效，适合做键盘 + 鼠标双模反馈
• :disabled 样式优先级高于普通规则，但不能覆盖内联 style；若需强控制，建议统一用 class 如 .btn--disabled
• 移动端要注意 :active 在 iOS 上延迟明显，可配合 -webkit-tap-highlight-color: transparent 消除点击灰块

图标按钮里 <i> 或 <svg> 必须设 aria-hidden="true"

当按钮文字+图标共存时，屏幕阅读器可能把图标字符（如 Font Awesome 的 <i class="fas fa-share"></i>）也读出来，造成语义污染。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 给图标容器加 aria-hidden="true"，确保只读按钮文本内容
• 若按钮无可见文字（纯图标），则必须用 aria-label 补充说明，例如 <button aria-label="分享到微信"><svg>...</svg></button>
• 不要依赖 title 属性作无障碍替代——它仅在鼠标悬停时显示，对键盘/语音用户无效

禁用按钮的视觉反馈容易被忽略

disabled 状态不只是加灰，还要传递“不可操作”的感知：光标变化、阴影弱化、过渡动画冻结都影响体验。

立即学习“前端免费学习笔记（深入）”；

• 务必设置 cursor: not-allowed，否则鼠标悬停时仍是手型，误导用户
• 禁用状态下移除 :hover 和 :active 效果，否则动画会卡顿或错乱
• 若按钮有背景渐变，禁用时建议转为单色 + 降低 opacity（如 opacity: 0.5），别只改颜色值——人眼对明度变化更敏感

按钮的细节不在动效多炫，而在每次点击是否都符合预期。尤其 type 缺失、无障碍遗漏、禁用态失真这三处，线上问题复现率最高。