按钮默认带边框和背景因浏览器UA样式，需重置border:none、background:transparent、outline:none、padding:0;margin:0四属性，并补充cursor:pointer及:hover/:active反馈，兼顾可访问性与兼容性。
按钮默认样式为什么总带边框和背景？
因为浏览器内置了 button 的 UA 样式，比如 Chrome 给 <button> 默认加了 border: 2px outset ButtonFace 和 background-color: ButtonFace。不重置就不可能“纯文字”。
必须重置的四个关键 CSS 属性
只设 border: none 不够——outline 在聚焦时会冒出来，background 可能残留系统色，padding 和 margin 也常有默认值。要真正“干净”，这四条缺一不可：
-
border: none—— 干掉边框 -
background: transparent—— 防止系统背景色干扰 -
outline: none—— 聚焦时不弹虚线框（如需可访问性，改用outline-offset+ 自定义outline） -
padding: 0; margin: 0—— 消除默认内边距和外边距，让文字紧贴内容区
字体和交互反馈不能漏
纯文字按钮不是“隐形按钮”，用户得感知它是可点的。常见疏漏是只清样式，忘了加基础交互提示：
- 显式设置
font-family和font-size，避免继承混乱（尤其嵌套在某些 UI 框架里） - 用
cursor: pointer告诉用户“这儿能点” - 加
:hover和:active状态样式，比如color: #0066cc或text-decoration: underline，否则点击无反馈 - 如果按钮含图标（如用
::before插入 Unicode），记得设line-height: 1防止基线偏移
IE 和旧版 Safari 的兼容注意点
IE11 会把 button 渲染成略高的块级容器，即使 padding: 0；Safari 12 之前对 appearance: none 支持不全。稳妥做法：
立即学习“前端免费学习笔记（深入）”；
- 加
appearance: none（配合-webkit-appearance: none、-moz-appearance: none） - 设
line-height: normal或具体数值（如line-height: 1.2），比依赖默认值更可控 - 若按钮用于表单提交，确保
type="button"显式声明，避免意外触发表单提交
最简可用代码就是：<button type="button" style="border:none;background:transparent;outline:none;padding:0;margin:0;cursor:pointer;font-size:14px;line-height:1.2;">点击我</button>。但别直接内联写，容易漏状态样式。
