真正可用的自定义按钮必须显式设置type属性、彻底重置UA样式、完整处理伪状态、严格使用原生disabled属性，并兼顾可访问性与多端交互；否则再炫酷的样式也易翻车。
直接用 <button> 标签 + CSS 就能做出真正可用的自定义按钮，但不处理 type、disabled 和伪状态，样式再好看也容易翻车。
为什么
这是最常被忽略的语义陷阱：<button> 在 <form> 里默认是 type="submit"。JS 还没加载完，用户回车或点击，表单立刻提交——根本没机会执行你的 click 监听器。
- 纯 JS 触发（弹窗、切换状态等）：必须显式写
type="button" - 要提交表单：用
type="submit"，且确保它在<form>内部 - 别依赖 JS 动态设
type，DOM 渲染时已按默认值行为执行
重置默认样式前先清三样
不同浏览器对 <button> 的 UA 样式差异很大：Safari 留白边、Firefox 加阴影、Chrome 继承 font-family 但 padding 行为诡异。不彻底重置，改 background-color 或 border-radius 都可能失效。
- 必加三件套：
appearance: none;（补-webkit-appearance: none;和-moz-appearance: none;） +border: none;+background: none; - 文字居中别只靠
text-align: center，<button>是 inline-level 元素，建议用display: flex; align-items: center; justify-content: center; - 移动端 iOS Safari 对过大的
border-radius（如999px）会裁剪内容，用12px或0.5rem更稳妥
:hover/:active/:focus/:disabled 必须单独写
只写 button:hover 不够。键盘用户 Tab 进入时看不到焦点；触摸屏上 :active 可能一闪而过；禁用状态若只靠 CSS 模拟（比如 opacity: 0.5），仍可触发点击事件。
立即学习“前端免费学习笔记（深入）”；
-
:focus必须保留可见轮廓，例如outline: 2px solid #007bff;，删掉outline是可访问性硬伤 -
:active建议用transform: scale(0.98)或背景色变化，避免仅靠颜色——色盲用户感知不到 -
:disabled要同步设置cursor: not-allowed;、opacity: 0.6;，并移除所有交互反馈（比如 hover 动画） - 移动端需加
@media (hover: none) and (pointer: coarse)降级:hover效果，否则手指按下去没视觉反馈
禁用状态不能只靠 CSS 模拟
用 opacity: 0.5 + pointer-events: none 看似禁用了按钮，但它依然能被键盘聚焦、仍响应 click 事件（尤其当 JS 动态绑定时），还破坏屏幕阅读器的 aria-disabled 语义。
- 必须用原生
disabled属性：<button disabled>提交</button> - JS 控制时，用
btn.disabled = true，而非btn.setAttribute('disabled', '')（后者不触发 DOM 属性变更监听） - Web Component 中需手动同步：
btn.disabled = this.hasAttribute('disabled');，并设tabIndex = -1防止键盘聚焦
真正难的不是写出花哨的渐变或动效，而是让每个状态都经得起键盘操作、屏幕阅读器识别、触摸反馈和表单上下文验证——这些细节漏掉一个，按钮就只是“看起来像按钮”。
