极简无边框按钮需在去除冗余样式的同时保留可点击信号，否则用户易忽略；必须提供颜色变化、下划线、背景微亮等至少一种交互线索，并配对:hover与:active状态，移动端补-webkit-tap-highlight-color，图标按钮须保证尺寸≥16px并用button包裹svg以保障可访问性。
极简无边框按钮不是“删掉 border: none 就完事”，而是保留交互可信度的前提下，用最少样式传递可点击信号。
为什么直接写 border: none 反而让用户不敢点
纯白背景上放一个 color: #333 的文字按钮，没 hover 变化、没点击反馈、没视觉锚点——它看起来就像段落里随便加的词。用户会下意识跳过，尤其在移动端，手指悬停无响应时更易放弃。
- 必须提供至少一种可感知的交互线索：颜色变化 / 背景微亮 / 下划线 / 图标旋转
- 避免依赖
cursor: pointer作为唯一提示，屏幕阅读器和键盘用户完全感知不到 - 如果按钮是链接行为（
<a href="..."></a>），记得加role="button"并监听Enter/Space键
:hover 和 :active 必须成对出现
只写 :hover 是半残废状态：鼠标移入有反应，点下去却像按在空气里。极简不等于省略反馈逻辑。
- 推荐组合：
color+background-color微调（如正常态#333，hover 态#1a1a1a，active 态#000） - 不要只改
opacity：iOS Safari 对 opacity 动画有渲染延迟，且低对比下几乎看不出区别 - 移动端需补
-webkit-tap-highlight-color: transparent，否则系统蒙层会盖掉你的:active样式
图标按钮怎么保持极简又不失功能识别度
纯图标按钮（比如 × 关闭、? 搜索）没有文字，全靠形状和上下文传达意图。一旦缩得太小或颜色太淡，就变成装饰元素。
- 图标最小尺寸建议 ≥ 16px，配合
padding扩展点击区，别指望用户精准戳中 SVG 路径 - 用
<button></button>包裹 SVG，而非<input type="image">—— 后者无法设置:focus-visible，键盘导航会断链 - SVG 内联写法更可控：
<svg width="16" height="16" viewbox="0 0 16 16"><path d="..." fill="currentColor"></path></svg>，这样能继承按钮的color值，无需单独设 fill
兼容旧浏览器时的底线妥协
IE11 或 Android 4.4 WebView 里，:focus-visible 不支持，currentColor 在某些 SVG 场景下失效，伪类嵌套也容易崩。
- 降级方案：用
.btn:focus替代:focus-visible，但务必加outline: 2px solid #007bff确保键盘可识别 - SVG 图标 fallback：外层加
<span>关闭</span>并用visually-hidden类隐藏文字（position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;） - 避免用
gap或aspect-ratio控制按钮尺寸，老浏览器直接忽略，导致图标错位或文字溢出
真正难的不是删样式，是在删掉所有冗余后，还让每个像素都在回答一个问题：“我点这里会发生什么？”
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
