应优先使用原生元素实现按钮，避免用或模拟——否则将缺失键盘操作（enter/space）、焦点管理及屏幕阅读器识别能力；若必须使用非原生标签，则需补全role="button"、tabindex="0"及键盘事件监听。
用 <span></span> 或 <div> 模拟按钮时的可访问性风险
<p>纯文本包裹在非交互元素里（比如 <code><span></span>）再靠 CSS 加点击效果，本质是“假装是按钮”——键盘用户按 Enter 或 Space 不会触发，屏幕阅读器也读不出它是可操作控件。这不是样式问题，是语义缺失。
真正简洁的按钮，不该牺牲可访问性。以下方案优先级从高到低：
- 能用
<button></button>就不用其他标签——它自带焦点、键盘响应、语义明确 - 若必须用文字链式风格（如“删除”“编辑”），用
<a></a>+role="button"+tabindex="0"，并手动监听keydown处理Enter/Space -
<span></span>或<div> 仅限内部嵌套场景（如图标+文字组合中文字部分），且绝不能单独作为触发点 <h3> <code><button></button>去默认样式但保留交互能力的最小化写法很多开发者怕
<button></button>默认边框、内边距、背景色破坏设计，直接用all: unset或重置所有属性，结果把 focus 样式、鼠标指针、甚至部分浏览器的键盘响应也干掉了。安全清空样式的同时保功能，关键只做三件事：
- 用
appearance: none（加-webkit-appearance和-moz-appearance前缀）剥离原生控件外观 - 显式设置
cursor: pointer和outline: none（但必须搭配:focus-visible自定义焦点样式） - 保留
border: none和background: transparent，别碰user-select或pointer-events
示例：
button.text-only { appearance: none; -webkit-appearance: none; -moz-appearance: none; border: none; background: transparent; cursor: pointer; outline: none; padding: 0; font: inherit; color: inherit; } button.text-only:focus-visible { outline: 2px solid #007bff; outline-offset: 2px; }当按钮内容只有纯文本时，
white-space和line-height的隐性影响文本按钮常被忽略行高和空白处理——尤其在 Flex 容器里垂直居中失败，或换行后高度突变，根源往往不是布局，而是文本渲染细节。
-
white-space: nowrap要谨慎：防止截断是好意，但长文本在小屏上会溢出容器，建议配合text-overflow: ellipsis和overflow: hidden -
line-height设为无单位数值（如1.2）比设像素值更安全，避免字体大小变化时行高错位 - 若按钮内含多词（如“保存并关闭”），用
word-break: keep-all防止中文被不合理断行
React/Vue 中动态生成文本按钮时，
key和aria-label的必要性循环渲染一串“编辑”“删除”按钮时，光靠
key={id}不够——如果多个按钮文案完全相同（比如都是“删除”），屏幕阅读器无法区分操作对象，用户可能误删。- 必须为每个按钮添加唯一
aria-label，例如aria-label={`删除用户 ${name}`} - 避免用
index当key，尤其列表排序/过滤后，会导致状态错乱或动画异常 - 若按钮本身文案已含上下文（如“删除张三”），则
aria-label可省略，但需确保文案稳定、不依赖 JS 动态拼接
复杂点从来不在“怎么让字看起来像按钮”，而在“怎么让机器和人都清楚它是什么、对谁生效”。
- 用
