用 button 替代 input[type="submit"] 更易控制样式，支持伪元素、渐变、动画；需显式设 type="submit"，清除默认样式时补 cursor:pointer；聚焦轮廓应兼顾可访问性；提交时禁用按钮并改文字，恢复用 disabled=false；移动端确保点击区域≥44×44px。
用 button 替代 input type="submit" 更容易控制样式
直接对 input[type="submit"] 加样式常遇到浏览器默认边框、内边距不一致、无法设置伪元素等问题。换成 button 元素后，所有 CSS 属性（包括 ::before/::after、背景渐变、过渡动画）都能正常生效。
实操建议：
- 把表单中的
<input type="submit" value="提交">换成<button type="submit">提交</button> - 必须显式写
type="submit"，否则在某些浏览器中点击不会触发表单提交 - 移除默认样式时，加
border: none; background: none;后记得补上cursor: pointer;，否则鼠标悬停无反馈
禁用浏览器默认聚焦轮廓（outline）但保留可访问性
很多人直接写 outline: none; 来去掉点击后的蓝色/虚线框，但这会损害键盘用户（Tab 导航）的可用性。
正确做法是只在非键盘操作时隐藏它：
- 用
:focus:not(:focus-visible)配合outline: none（现代浏览器支持） - 更兼容的写法是：
button:focus { outline: 2px solid transparent; }<br>button:focus-visible { outline: 2px solid #007bff; } - 别忘了测试 Tab 键是否能正常聚焦按钮，并看到清晰的焦点指示
添加加载态避免重复点击（前端防抖关键一步）
提交按钮点击后若没及时置灰或变文字，用户可能连点多次，导致重复请求。
简单可靠的 JS 控制方式：
- 监听表单
submit事件，拿到按钮后设disabled = true并改文字：btn.textContent = "提交中..."; - 成功/失败后恢复状态时，一定要用
btn.disabled = false而不是removeAttribute("disabled")，后者在部分旧版 Safari 中无效 - 配合 CSS 加个
opacity: 0.6; transition: opacity 0.2s;让禁用态更自然
移动端点击区域小？用 padding 和 min-width 扩展可触控范围
iOS 和 Android 对小于 44×44px 的点击目标识别不准，纯靠 font-size 放大文字不能解决实际触控问题。
确保按钮足够“好点”：
- 设
min-width: 44px;+padding: 12px 24px;（上下留出垂直空间，左右撑开宽度） - 避免用
height强制固定高度，它会截断文字行高或导致文字偏上 - 如果按钮文字动态变化（如“发送验证码”→“60s后重发”），用
white-space: nowrap;防止换行破坏布局
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
