怎么用 CSS 类统一控制所有按钮样式
直接给 button 元素写全局样式最省事，但容易误伤第三方组件或表单控件。更稳妥的做法是定义一个通用类名（比如 .btn），所有需要统一样式的按钮都显式添加它。
常见错误现象：只写 button { ... }，结果弹窗里的确认按钮、富文本编辑器里的工具图标全被改了；或者用 [type="button"] 漏掉没写 type 的按钮。
- 推荐写法：
.btn { padding: 8px 16px; border: 1px solid #ccc; background: #fff; cursor: pointer; } - 必须给
.btn加cursor: pointer，否则部分浏览器默认不显示手型光标 - 如果项目用到
input[type="button"]或input[type="submit"]，得单独加规则：input.btn, button.btn { ... } - 别在
.btn里设display: block——按钮默认是 inline-level，强行 block 会破坏行内布局
按钮禁用状态的样式和行为必须同步处理
只改外观不拦交互，用户点下去没反应却看不出为什么，是典型的体验断裂。html 的 disabled 属性和 CSS 的 :disabled 伪类必须配合使用。
性能影响小，但兼容性要注意：IE9+ 支持 button:disabled，但 input:disabled 在旧版 safari 有渲染延迟。
立即学习“前端免费学习笔记（深入）”；
- 必须同时设置：
.btn:disabled { opacity: 0.5; cursor: not-allowed; } - 禁用时不要仅靠
opacity，要加pointer-events: none防止穿透点击（尤其在重叠层里） - Vue/React 中动态绑定
disabled时，确保值是布尔类型，disabled="false"字符串仍会被当作启用 - 避免用
class="btn disabled"模拟禁用——语义错误，屏幕阅读器无法识别
如何让按钮在不同上下文里保持可用性
同一个 .btn 类在模态框、表格操作栏、卡片底部出现时，尺寸和边距需求完全不同。硬写固定 padding 和 margin 会导致频繁覆盖。
容易踩的坑：用 .btn--large 这类修饰类，结果在响应式断点里忘了适配，小屏上按钮撑破容器。
- 基础类
.btn只管颜色、边框、圆角、光标，不设具体宽高和外边距 - 尺寸由上下文容器控制：比如
.modal-footer .btn统一设margin-left: 8px，而不是每个按钮加ml-2 - 文字大小建议用
em或rem，避免父元素字号变化时按钮文字突兀缩放 - 移动端慎用
min-width——窄屏下强制最小宽度会让按钮挤出视口
按钮焦点与键盘可访问性不能靠 js 补救
很多团队等测试提 bug 才加 :focus 样式，其实这是 HTML 原生能力，不依赖 JS 就能生效。忽略它等于默认放弃键盘用户。
chrome/firefox 默认用蓝色外框，但设计稿常要求改成其他颜色或样式，这时容易删掉整个 :focus 规则。
- 必须保留：
.btn:focus { outline: 2px solid #007bff; outline-offset: 2px; } - 不要用
outline: none——除非你实现了同等辨识度的自定义焦点样式 - 如果用了
box-shadow模拟焦点环，注意深色模式下对比度是否达标（至少 4.5:1） -
tabindex不要乱加：按钮天然可聚焦，tabindex="0"多余，tabindex="-1"会把它踢出焦点流
最常被忽略的是按钮文案的语义强度——“提交”比“确定”更明确，“删除用户”比“删除”更安全，这类细节没法靠 CSS 解决，但直接影响用户是否敢点。