按钮样式应统一使用 .btn 公共类，显式声明 display: inline-block 或 inline-flex、font: inherit、line-height: 1.5、box-sizing: border-box 和 outline: none，并通过 .btn--disabled 等修饰类扩展状态样式，避免浏览器默认样式干扰。
按钮样式统一用 .btn 公共类就够了
直接定义一个 .btn 类，把颜色、边框、圆角、内边距、字体大小这些基础样式写死，所有按钮都加这个 class。不需要为每个按钮单独写样式，也不推荐用 button[type="submit"] 这类选择器去批量控制——它容易漏掉 <input type="button"> 或自定义触发组件。
.btn 必须声明 display: inline-flex 或 display: inline-block
否则在某些布局里（比如 flex 容器中）会表现不一致；更关键的是，inline 默认值会让 width 和 height 失效，导致你设的 padding 看起来“不对劲”。
-
inline-block兼容性好，IE8+ 都支持 -
inline-flex更适合需要内部对齐（如图标+文字居中）的场景 - 别忘了加
vertical-align: middle，避免和文字基线错位
状态样式靠修饰类组合，不是重写整个 .btn
比如禁用态、加载中、危险操作，应该用 .btn.btn--disabled、.btn.btn--loading 这种方式扩展，而不是写一堆独立的 .btn-disabled。这样既保持主样式稳定，又方便叠加：
.btn {
padding: 8px 16px;
border-radius: 4px;
border: 1px solid #ccc;
background: #fff;
color: #333;
cursor: pointer;
}
.btn--disabled {
opacity: 0.5;
cursor: not-allowed;
}
.btn--primary {
background: #007bff;
color: white;
border-color: #007bff;
}
注意：.btn--primary 只改背景、文字、边框色，其他属性继承 .btn，避免重复声明 padding 或 border-radius。
立即学习“前端免费学习笔记（深入）”；
小心 button 的默认样式干扰复用
不同浏览器对 <button> 的默认 padding、font-size、line-height 处理不一致，直接套 .btn 可能出现高度参差。必须显式重置：
- 加
font: inherit继承父级字体设置 - 明确写
line-height: 1.5（不要依赖默认值） - 用
box-sizing: border-box确保padding不撑大尺寸 - 移除
outline（聚焦时用:focus-visible单独处理）
统一这事，难点不在写多少样式，而在于有没有把默认行为“打平”——漏掉任意一项，都可能让某个按钮在某个页面里突然矮半像素或文字偏上。
