更适合做极简按钮，因其原生支持焦点管理、键盘操作（tab/enter/space）和屏幕阅读器识别，无需额外js即可满足无障碍要求；而模拟按钮需手动补全所有能力，易导致键盘用户无法操作、语义缺失及高对比模式下不可见等问题。

为什么比

更适合做极简按钮

极简不是删样式，而是删干扰。用 <div> 模拟按钮会丢失焦点管理、键盘回车触发、屏幕阅读器识别——这些在极简设计里反而更关键。原生 <code><button></button> 默认带 tabindex 和 role="button"，不用写一行 JS 就能被 Tab 键聚焦、空格键点击。

常见错误：把按钮写成 <div class="btn">提交</div>，再加 onclick，结果键盘用户完全无法操作。

• 必须显式设置 type="button"（尤其在 <form></form> 内），否则默认是 submit，点一下就刷新页面
• 禁用状态直接用 disabled 属性，不要只靠 CSS 加灰——它会自动禁用焦点和点击，且语义正确
• 避免用 <a></a> 做按钮，即使加了 role="button"，也无法原生响应空格键

CSS 极简样式的关键控制点

极简按钮的视觉干净，靠的是克制而非删减。重点不是“去掉什么”，而是“保留哪几个属性起决定性作用”。

典型错误：只设 background: transparent 和 border: none，结果按钮在高对比模式下彻底不可见。

• padding 是呼吸感来源，建议至少 0.5em 1em，太小会显得局促
• border 不一定非要 none，1px 实线边框（如 #ccc）常比纯透明更稳重
• color 必须与背景有足够对比度（WCAG AA 级要求 ≥ 4.5:1），深灰文字配白底比纯黑更柔和
• 去掉 outline 前先确认是否加了 :focus-visible 替代样式，否则键盘导航会失焦

hover 和 active 状态怎么“轻量”处理

极简不等于无反馈。取消 hover 动画容易让用户怀疑没点上，但加太多又破坏简洁感。

Markdown to HTML

{"answer":"将 Markdown 转换为内嵌 CSS、样式精美的独立 HTML。完美适用于新闻简报、文档、报告及邮件模板。"}

下载

常见坑：用 transition: all .3s 导致文字模糊或边框跳变。

• 只对 background-color 或 opacity 做过渡，避免影响布局的属性（如 padding、margin）
• :active 状态建议用 transform: translateY(1px) 模拟按压感，比改颜色更轻量
• 深色模式下，hover 色差要重新校验，hsl(0, 0%, 90%) 在暗背景下可能比 #f5f5f5 更可靠
• 移动端没有 hover，所以 :active 是唯一触觉反馈，务必保留

图标按钮怎么保持极简语义

加图标本身不破坏极简，破坏的是语义缺失。一个只有 SVG 图标的按钮，对屏幕阅读器就是“空白按钮”。

错误写法：<button><svg>...</svg></button> —— 没文本，没 aria-label。

• 图标按钮必须带 aria-label，例如 <button aria-label="删除"><svg>...</svg></button>
• 如果图标旁有文字（如 “删除 ×”），则无需 aria-label，但 SVG 要加 aria-hidden="true"
• 避免用字体图标（如 FontAwesome），它们在缩放或高对比模式下易糊，内联 SVG 更可控
• SVG 宽高统一设为 1em，用 vertical-align: -0.125em 对齐文字基线

极简按钮最难的不是写几行 CSS，而是判断哪些“默认行为”值得保留——比如 focus outline 的形状、disabled 时的指针样式、甚至 button 的默认内边距。删掉它们之前，先问一句：这个默认值，是不是比你写的替代方案更通用、更健壮？