极简白模按钮需保留功能语义、剔除视觉冗余，必须显式设type="button"防误提交，CSS需重置appearance、border、background并适配深色模式与可访问性要求。
极简白模按钮不是“清空所有样式”，而是保留功能必需、剔除视觉冗余——真正难的是在无边框、无阴影、纯色背景下，让用户一眼认出它是可点击的。
为什么
表单里漏写 type 属性，浏览器默认当 type="submit" 处理。用户点一下、回车、甚至焦点在按钮上按空格，都会触发表单提交，页面刷新或跳转——这不是 bug，是规范行为。
- 正确写法：
<button type="button">取消</button>（纯 JS 交互）或<button type="submit">保存</button>（明确提交意图） - 别指望用
event.preventDefault()补救：语义错了，可访问性、键盘操作、屏幕阅读器都会出问题 - 如果按钮嵌在
<form>里又没设type，DevTools 的 Elements 面板里能看到它被标记为submit，哪怕你写了 onclick
白模按钮的最小可行 CSS 集合
所谓“白模”，是指背景透明/白色、无边框、无阴影，靠 padding 和文字对比撑起可点击区域。但删太多会失效——Safari 强制加内边距、Firefox 默认带阴影、Chrome 继承父字体大小，直接写 padding 常常不生效。
- 起步三件套必加：
appearance: none、-webkit-appearance: none、-moz-appearance: none - 紧跟着清掉：
border: none、background: none、font: inherit - 文字居中别只靠
text-align: center；推荐display: flex; align-items: center; justify-content: center - 移动端要加
@media (hover: none) and (pointer: coarse)降级:hover，否则手指按压没反馈
如何让白模按钮“看得见又不抢戏”
纯白背景上的白模按钮，靠颜色对比撑不住，得靠交互反馈和布局位置建立认知。用户不是靠“看起来像按钮”来点击，而是靠“这里该有操作入口”来触发。
立即学习“前端免费学习笔记（深入）”；
-
color至少用#333（不是#000），WCAG 要求对比度 ≥ 4.5:1；背景是#fff时，#666更安全 -
padding别用固定像素，比如10px 20px；改用相对单位：0.5em 1em，适配缩放和不同字体大小 -
:hover状态不能只改color；加background-color: rgba(0,0,0,0.04)或轻微box-shadow: inset 0 -2px 0 rgba(0,0,0,0.08)，提供触觉暗示 -
:active必须有反馈，哪怕只是transform: translateY(1px)，否则用户会怀疑没点上
disabled 状态千万别用 opacity 模拟
用 opacity: 0.5 + pointer-events: none 看似省事，但键盘用户 Tab 进来后按空格仍会触发，屏幕阅读器可能读成“可用按钮”，而实际不可操作。
- 正确做法：
<button type="button" disabled>加载中…</button> - CSS 单独定义：
button:disabled { cursor: not-allowed; opacity: 0.6; } - JS 控制时只操作
element.disabled = true/false，不要手动切 class 或改样式 - 注意：disabled 按钮不会触发
click，但会响应focus，所以键盘用户 Tab 进来后需用element.blur()主动移焦，避免卡住
最易被忽略的点：白模按钮在深色模式下几乎隐形。别只写一套颜色，用 @media (prefers-color-scheme: dark) 单独定义 color 和 :hover 背景，否则夜间模式用户会反复点击空白区域。
