极简按钮需用最少CSS属性实现清晰交互，推荐语义化<button>，核心样式含background-color、color、border: none、padding、border-radius；须兼顾:hover/:active反馈、disabled状态处理及深色模式适配。
极简按钮不是“去掉所有样式”，而是用最少的CSS属性达成清晰、可识别、有反馈的交互效果。关键在克制，不在删减。
button vs input[type="button"]：语义和兼容性怎么选
用 <button> 是默认推荐。它天然支持内嵌 HTML（比如图标）、可聚焦、无障碍友好，且在旧版 IE 中对 :focus 和 :active 的行为更稳定。<input type="button"> 仅适合纯文本、无内容扩展需求的场景，且无法包裹子元素。
- 需要加 SVG 图标或文字+图标组合？必须用
<button> - 表单中做提交/重置按钮？
<button type="submit">比<input type="submit">更易控制样式和语义 - 老项目要兼容 IE9？避免对
<input type="button">使用::before/::after—— 它不支持伪元素
极简样式只需这 5 个 CSS 属性
真正极简不是“只写一行”，而是剔除冗余、保留功能必需项。以下是最小可行集合：
-
background-color：定义主视觉锚点，别用纯白（#fff）配白底，至少带一点灰度（如#f8f9fa） -
color：确保与背景足够对比，WCAG AA 级要求对比度 ≥ 4.5:1 -
border: none：显式清除默认边框，避免某些浏览器（如 Safari）保留细微描边 -
padding：控制可点击区域大小，0.5em 1em比固定像素（如10px 20px）更适应字体缩放 -
border-radius：极简 ≠ 直角，4px或0.25em足够柔化边缘，又不显“圆润感”
示例：
button { background-color: #f0f0f0; color: #333; border: none; padding: 0.5em 1em; border-radius: 0.25em; }
立即学习“前端免费学习笔记（深入）”；
:hover 和 :active 必须加 transition 吗
不是“必须”，但不加会破坏极简的完整性。极简追求的是干净，不是僵硬；交互反馈缺失会让按钮像图片一样不可信。
- 只改颜色？加
transition: background-color 0.15s ease就够，比all 0.3s更轻量、更可控 - 想加轻微压感？
:active { transform: translateY(0.05em); }比改阴影或边框更省渲染开销 - 禁用状态（
disabled）别只靠 opacity：同时设pointer-events: none和cursor: not-allowed，否则键盘用户仍能 focus 到它
深色模式下极简按钮容易翻车的点
很多“极简”按钮在深色背景下直接消失，因为开发者只写了亮色模式下的 background-color 和 color，没考虑系统偏好。
- 用
@media (prefers-color-scheme: dark)覆盖关键值，例如：@media (prefers-color-scheme: dark) { button { background-color: #333; color: #eee; } } - 避免用
hsl(0, 0%, 95%)这类“高亮但未指定明度基准”的写法——它在深色模式下可能变成浅灰，而非预期的亮灰 - 测试时别只看 Chrome DevTools 的模拟开关，真机开启深色模式再点一次，
:focus-visible的轮廓线是否还清晰可见
极简最难的部分，从来不是写多少行代码，而是判断哪一行可以不要、哪一行不能妥协。比如 border: none 看似简单，但它背后是放弃浏览器默认边框语义的主动选择；padding 写成相对单位，意味着你接受了它随字体变化而伸缩——这些取舍，才是极简真正的门槛。
