确认按钮需兼顾提交功能、防误触、状态反馈与移动端适配；type="submit"用于表单提交，type="button"用于纯js交互，必须明确声明type属性并重置css、处理:focus轮廓及disabled状态。
确认按钮不是“点一下就行”的摆设，它得能提交、能防误触、能反馈状态、能在手机上正常按——否则用户点完没反应，或者点了两次发两遍请求，问题就出在按钮本身。
button type="submit" 和 type="button" 别混用
表单里需要提交数据时，用 type="submit"；纯触发 JS 逻辑（比如弹个提示、切换页面）就用 type="button"。不写 type 默认是 submit，一按就刷新页面或发请求，JS 还没加载完就走了。
-
type="submit"必须放在<form></form>标签内才有效，否则只是个普通按钮 -
type="reset"会清空整个表单，慎用，尤其别和submit放一起 - 想阻止默认提交行为？用
event.preventDefault()，但别依赖它——万一 JS 加载失败，type="button"才是安全底线
确认按钮的 CSS 重置必须做全
浏览器对 <button></button> 的 UA 样式差异很大：Safari 死守 padding，Firefox 加阴影，Chrome 继承父级 font-size 导致文字忽大忽小。只改 background 或 color 往往无效。
- 起步三件套：
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 - 移动端要加
@media (hover: none) and (pointer: coarse)降级:hover效果，否则手指按下去没视觉反馈
:active 状态不能只靠颜色变
色盲用户可能看不出背景色变化，光靠 background-color 切换不够。真正可用的点击反馈得有空间感或明确形变。
- 推荐用
transform: scale(0.98)或box-shadow: inset 0 2px 4px rgba(0,0,0,0.15) -
:disabled状态必须同步设cursor: not-allowed、opacity: 0.6和pointer-events: none，否则仍可聚焦或误点 -
:focus轮廓不能删——outline: 2px solid #007bff是可访问性硬要求，键盘用户靠它导航
确认按钮常被忽略的兼容性雷区
安卓 WebView、旧版 Safari、微信内置浏览器对某些 CSS 属性支持不稳定，看似简单的按钮，在真实设备上可能渲染异常或交互失效。
-
border-radius: 9999px在部分安卓 WebView 下会锯齿或失真，统一用6px更稳妥 -
box-shadow: 0 2px 4px rgba(0,0,0,0.1)是平衡点：太深（0.3）显沉重，太浅（0.05）看不出层次 - 避免用
pointer-events: none模拟禁用态——它会切断所有事件，包括focus，导致键盘无法抵达
最易被跳过的其实是 type 属性和 :focus 轮廓：一个决定是否误提交，一个决定能否被键盘操作——它们不炫酷，但缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
