统一按钮风格需定义基础类。btn 并搭配修饰类灵活适配：基础类设内边距、字体、圆角、无边框及无障碍焦点；修饰类如。btn-primary、.btn-outline 等语义化控制样式；须保障对比度≥4.5:1、响应式微调及避免！important 等陷阱。
统一按钮风格的关键是定义一个基础的通用按钮类，再通过组合类名或少量修饰类灵活适配不同场景，而不是为每个按钮单独写样式。
定义基础按钮类（.btn）
这是所有按钮的默认样式锚点，涵盖最常用的视觉属性：
- 设置内边距、字体大小、行高、圆角和光标，保证基本可点击性
- 用 border: none 和 outline: none 清除 浏览器 默认边框与聚焦轮廓（后续可用 :focus-visible 安全增强可访问性）
- 使用 display: inline-flex 或 inline-block，兼顾居中对齐与文本换行控制
- 禁用用户选中（-webkit-user-select: none; user-select: none），避免误操作干扰
用修饰类区分语义与状态（.btn-primary / .btn-small / .btn-disabled）
不修改 HTML 结构，仅靠添加类名即可切换样式，例如：
- .btn-primary：主操作按钮，设深色背景 + 白字 + 鼠标悬停加深背景
- .btn-outline：描边按钮，背景透明，边框与文字同色，悬停时填充背景
- .btn-small：减小 padding 和 font-size，适合 工具 栏或紧凑布局
- .btn-disabled：配合 disabled 属性使用，设 opacity: 0.6 + cursor: not-allowed，并禁止 pointer-events
保持可访问性与响应式友好
基础类需内置无障碍支持：
立即学习 “ 前端免费学习笔记（深入）”；
- 确保文字颜色与背景色对比度 ≥ 4.5:1（可用在线工具如 WebAIM Contrast Checker 核验）
- 为 :focus 设置清晰可见的焦点环（如 box-shadow: 0 0 0 2px #007bff），不依赖 outline
- 在小屏幕上，可加媒体查询微调 padding 或最小宽度，防止按钮过窄难点
避免常见陷阱
初学者易犯的几个问题：
- 不要用 !important 覆盖基础类——应通过类名顺序或更具体的选择器解决优先级
- 别把颜色 / 尺寸等变量硬 编码 进基础类——留出修饰类空间，方便后期主题化
- 避免过度依赖 ID 或标签选择器（如 button {…}）——会破坏类的复用性和可控性
- 图标按钮记得加 aria-hidden=”true” 给 icon 元素，文字内容保留在 button 内或用 aria-label
