纯 css 扁平化按钮需重置默认样式：去边框（border: none）、设明确背景色、显式 padding、统一系统字体、圆角 4–8px；悬停用明度变化、禁用态加 opacity/cursor/pointer-events；兼顾深色模式与可访问性。
直接用 button 元素 + 纯 CSS 就能做出真正可用的扁平化按钮，不需要框架、不依赖 JS，关键在于「去掉默认样式干扰」和「控制视觉权重」。
为什么 button 默认不是扁平的？
浏览器给 button 加了默认边框、阴影、背景渐变和内边距，这些恰恰是扁平化要剔除的。不重置就等于在拟物化基础上叠 CSS，效果会打架。
-
border: none必须写，否则圆角或纯色会失效 -
background: transparent或明确色值，不能靠继承 -
padding要显式设置，否则不同浏览器渲染高度不一致 -
font-family建议统一为系统字体栈（如system-ui, -apple-system），避免渲染偏差
border-radius 怎么用才像现代扁平按钮？
圆角不是越大越好。真正在用的扁平按钮，圆角值通常在 4px 到 8px 之间——足够柔和，又不显“胶囊感”。border-radius: 999px 是椭圆/标签式设计，不属于主流扁平风格。
- 移动端建议用
6px，兼顾点击热区与视觉清爽 - 桌面端可放宽到
8px，但别超过12px，否则失去扁平克制感 - 如果按钮含图标，左右
padding至少留16px，避免文字贴边 - 慎用
border-radius: 50%，那是圆形按钮，语义和交互场景完全不同
悬停和禁用状态容易漏掉的细节
扁平按钮没有立体反馈，全靠颜色、透明度或轻微位移传递状态。很多人只写了 :hover，却忘了 :disabled 和焦点样式，导致可访问性断裂。
-
:hover推荐用背景色明度变化（如#4285f4 → #3367d6），不用 opacity，避免文字模糊 -
:focus必须加outline或自定义聚焦环，否则键盘用户找不到焦点 -
:disabled不仅要设opacity: 0.5，还得加cursor: not-allowed和pointer-events: none - 过渡动画只对
background-color和color做transition，避免触发重排
真正难的不是写出来，而是让按钮在深色模式、高对比度模式、缩放 200% 时依然可读可点——扁平化不是删减，是克制地表达优先级。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
