应重置 button 默认样式以避免兼容性问题：需设 border: none、background-color: transparent、color: inherit、font: inherit、padding: 0、margin: 0、outline: none、-webkit-appearance: none 和 -moz-appearance: none，并补充 cursor、hover、focus、disabled 状态样式以保障可用性与可访问性。
直接用 <button></button> 写文字按钮，但别跳过重置——否则你会被浏览器默认 padding、border、outline、字体继承和 focus 样式反复坑。
为什么不能只写 border: none
只设 border: none 是最常见错误。它只去掉边框，但 <button></button> 还自带：
- 浏览器特定的 padding（Chrome 约 6px，Firefox 更多）
- background-color（通常是浅灰或系统主题色）
- outline（点击后蓝色/黄色焦点框）
- font 不继承父级，可能突然变小或加粗
- iOS Safari 下还有 -webkit-appearance: button 强制渲染原生样式
button 最小可用重置规则
这段 CSS 能覆盖绝大多数场景，不依赖预处理器，也不污染全局：
button {
border: none;
background-color: transparent;
color: inherit;
font: inherit;
padding: 0;
margin: 0;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
}
注意点：
- color: inherit 和 font: inherit 确保文字颜色、字号、行高、字重全部跟随上下文
- -webkit-appearance: none 必须加，否则 iOS/Safari 仍显示圆角+阴影+内边距
- margin: 0 防止某些 UA 样式表注入额外外边距
- 不要漏掉 outline: none，否则键盘 tab 切换时焦点不可见（可访问性风险）
文字按钮该加什么样式才“像按钮”
重置后按钮变成纯文本，用户根本看不出它是可点击的。必须显式添加交互反馈：
- 基础视觉锚点：
cursor: pointer（没这个，鼠标悬停无提示） - 悬停状态：
text-decoration: underline或color: #007bff（避免仅靠颜色变化，色觉障碍用户难识别） - 焦点状态：
&:focus { outline: 2px solid #007bff; outline-offset: 2px; }（别用outline: none一删了之） - 禁用状态：
&:disabled { opacity: 0.5; cursor: not-allowed; }（opacity比color: gray更可靠）
示例片段：
button.text-btn {
cursor: pointer;
}
button.text-btn:hover {
text-decoration: underline;
}
button.text-btn:focus {
outline: 2px solid #007bff;
outline-offset: 2px;
}
button.text-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
容易被忽略的兼容性细节
真正上线前得盯住这几个点：
- Firefox 对 font: inherit 的解析略保守，建议补一句 line-height: normal 防止文字贴顶
- 如果按钮内含 SVG 图标，vertical-align: middle 很可能需要手动加，否则基线对不齐
- 在 flex 容器里，未设 align-items 时，<button></button> 的垂直居中行为在各浏览器有细微差异，优先用 align-items: center 显式控制
- outline 在 Windows High Contrast Mode 下会被强制覆盖，不能依赖它做唯一焦点指示
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
