按钮应使用rem而非px控制尺寸以实现响应式维护，基础设1rem=16px，高度用2.5rem，内边距0.75rem/1.5rem，小号按钮用css变量；圆角禁用9999px，标准用0.375rem，完全圆形用50%；颜色需分状态定义五个变量，禁用态用灰阶色值；按钮组用flex+gap或共用边框实现无缝拼接。
按钮尺寸怎么用 rem 而不是 px 控制？
响应式项目里硬写 px 尺寸，后期改字号或适配移动端时全得重调，根本没法维护。用 rem 是为了把所有尺寸锚定在根字体大小上，改一个 :root { font-size: 16px } 就联动缩放。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 基础尺寸统一基于
1rem = 16px，按钮高度设为2.5rem（即 40px），内边距用0.75rem 1.5rem - 小号按钮别直接写
1.25rem，而是定义 CSS 变量：--btn-sm-height: 1.25rem，方便后续批量调整 - 注意 Safari 旧版本对
rem在border-radius中的解析有偏差，圆角建议补一句border-radius: 4px作降级
border-radius 设成 9999px 真的靠谱吗？
这不是“偷懒技巧”，是典型反模式。视觉上看似圆润，但会破坏可访问性：焦点框（:focus-visible）和高对比度模式下，超大圆角让轮廓严重失真，屏幕阅读器用户也难感知按钮边界。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 标准圆角统一用
0.375rem（6px），既柔和又保留几何识别度 - 完全圆形按钮（如图标按钮）必须用
50%，且确保宽高相等，否则会拉伸变形 - 如果设计稿要求“胶囊形”，优先用
border-radius: 9999px+min-width: max-content组合，但必须加@supports (border-radius: 9999px)条件包裹，老浏览器回退到0.375rem
颜色变量为什么不能只写 --primary 一个？
按钮状态多：默认、悬停、激活、禁用、加载中……如果所有状态都靠一个变量撑着，换主题时就得挨个覆盖伪类，维护成本爆炸。更糟的是，禁用态用 opacity: 0.5 覆盖 --primary，会导致文字可读性不达标（WCAG AA 不通过）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 至少拆出五个变量：
--btn-primary-bg、--btn-primary-hover-bg、--btn-primary-active-bg、--btn-primary-disabled-bg、--btn-primary-text - 禁用态背景色别用透明度，直接设灰阶值，比如从
#007bff降到#cdd5df，再配深灰文字#6c757d - 加载中按钮要单独控制
cursor: wait和pointer-events: none，不能只靠颜色变灰
如何让按钮组（.btn-group）真正“无缝”拼接？
常见错误是给每个按钮加 margin-right: -1px，结果在缩放或不同 DPI 屏幕下出现 1px 白缝，或者父容器有 overflow: hidden 时边缘被裁掉。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
display: flex+gap: 0替代负 margin，Flex 布局天然无间隙 - 相邻按钮共用边框：左侧按钮关右 border，右侧按钮关左 border，用
.btn-group > .btn:not(:first-child)选择器统一处理 - 如果按钮带阴影，
box-shadow必须设为inset或限制扩散半径，否则拼接处阴影叠加发黑
最麻烦的其实是字体抗锯齿差异——Mac 上 font-smoothing: antialiased 会让细边框按钮文字边缘发虚，Windows 则相反。这个点没写进规范，但上线前一定要双平台对照看。
