按钮样式与行为必须严格规范：需加appearance: none、border: none、background: none三件套；type属性不可省略，禁用状态须用disabled原生属性；伪类状态及可访问性细节均需完整实现。
不加 appearance: none、border: none、background: none 这三件套，任何背景色、圆角、阴影都可能被浏览器 UA 样式覆盖或行为异常——这是最常翻车的起点。
button 默认 type 是 submit，不写就容易误提交
在 <form></form> 里放一个没设 type 的 <button></button>，用户点它或按回车，页面立刻刷新或发请求。JS 还没加载完，event.preventDefault() 根本没机会执行。
- 纯触发 JS（比如弹窗、切换状态）：必须写
<button type="button">点我</button> - 要提交表单：用
<button type="submit">提交</button>，且确保它在<form></form>内部 - 别用 JS 动态设置
type属性——DOM 渲染时行为已按默认值执行 -
type="reset"仅在表单内有意义，会清空所有控件值，慎用
重置 button 默认样式必须三件套起步
不同浏览器对 <button></button> 的 UA 样式差异极大：Safari 固执保留 padding 和边框，Firefox 加阴影，Chrome 继承 font-family 但行高错乱。只改 background-color 或 border-radius 常常无效。
- 必加：
appearance: none;，同时补-webkit-appearance: none;和-moz-appearance: none; - 必清：
border: none;和background: none; - 文字居中别只靠
text-align: center——<button></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 可能一闪而过；:disabled 若只靠 CSS 模拟（比如 opacity: 0.5），按钮仍可聚焦、仍响应 click 事件。
-
:focus必须保留可见轮廓，例如outline: 2px solid #007bff;；删掉outline是可访问性硬伤 -
:active建议用transform: scale(0.98)或背景色变化，避免仅靠颜色——色盲用户感知不到 -
:disabled要同步设置cursor: not-allowed;、opacity: 0.6;、pointer-events: none;，并移除所有交互反馈（比如 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——绝大多数场景下，
<button class="btn-primary">提交</button>配一套 CSS 类就够了
真正麻烦的不是写样式，而是让每个伪状态都符合行为预期、可访问、跨端一致。哪怕只漏掉 :focus 或 disabled 的原生属性，都可能在线上环境突然暴露问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
