直接用button标签配合纯css可制作真正可用的圆角扁平化按钮，关键在于清除浏览器默认拟物化样式（边框、阴影、内边距、渐变），再以border-radius:4–8px、明确背景色、显式padding、系统字体及完整状态反馈重建简洁感。
直接用 <button></button> 标签配合纯 CSS 就能做出真正可用的圆角扁平化按钮，关键不是“加效果”，而是“清干扰”——去掉浏览器默认的边框、阴影、内边距和渐变，再用明确的视觉属性重建简洁感。
基础样式必须重置
浏览器默认给 button 加了拟物化样式（比如灰色边框、微妙阴影、不一致的 padding），不清理就会和扁平风格冲突。这几项不能省：
- border: none —— 必须写，否则圆角或纯色背景会失效
-
background-color: #4285f4（或其他明确色值）—— 不能留空或靠继承，Safari 中
appearance: none后若没设 background，按钮会彻底不可见 - padding: 10px 16px —— 显式设置，避免不同浏览器渲染高度差异
- font-family: system-ui, -apple-system, sans-serif —— 统一系统字体，防止渲染偏移
圆角尺寸要克制
扁平按钮的圆角不是越圆越好，主流做法是保持柔和但不抢戏：
- 推荐 border-radius: 4px–6px：桌面端可到 8px，但超过 12px 就容易显得“胶囊化”，失去扁平克制感
- 避免
border-radius: 50%：那是圆形按钮，语义和点击热区都不同，除非你真需要图标按钮 - 如果按钮含图标，左右 padding 至少留 16px，防止文字或图标贴边
状态反馈要完整
扁平按钮没有立体感，所有交互反馈全靠颜色、透明度和焦点样式传递，漏掉任一状态都会伤及可用性：
-
:hover 用明度变化（如
#4285f4 → #3367d6），别用 opacity，否则文字发虚 -
:focus 必须有可见焦点环：推荐
outline: 2px solid #007bff; outline-offset: 2px，确保键盘用户可定位 -
:disabled 要同时设
opacity: 0.5; cursor: not-allowed; pointer-events: none，三者缺一不可 - 过渡只对
background-color和color做transition，避免触发布局重排
深色模式与可访问性要兼顾
真正的扁平不是“看起来干净”，而是在各种环境下都可读、可点、可操作：
- 深色模式下，背景色和文字色需用
@media (prefers-color-scheme: dark)反向调整 - 文字与背景的对比度至少达 4.5:1（WCAG AA 级），可用工具校验
- 缩放至 200% 时，按钮仍需保持足够点击区域（建议最小尺寸 44×44px）
- 禁用态不要仅靠颜色区分，加上文字提示（如 “已提交”）更稳妥
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
