按钮样式应按语义、状态、上下文选择：主操作用6px圆角+44px最小高度，图标按钮用50%圆角+36px尺寸，文本链接类保持直角；禁用状态需同时设pointer-events:none、cursor:not-allowed和aria-disabled="true"；hover/focus/active须分离定义，图标按钮必配aria-label。
按钮样式怎么选：别只盯着“圆角+阴影”
现在主流 HTML 模板里，button 样式早已不是统一套个 .btn-primary 就完事。真正影响点击率和可访问性的，是语义、状态、上下文三者叠加的结果。比如在表单底部放一个全宽 type="submit" 按钮，用 width: 100% + padding: 12px 0 比单纯加阴影更可靠；而导航栏里的操作按钮，反而要控制横向尺寸，避免误触。
常见误区是把所有按钮都设成 border-radius: 8px，结果在小屏上导致文字被截断或点击热区缩水。实际项目中更稳妥的做法是：
- 主操作按钮（如“提交”“确认”）用
border-radius: 6px+min-height: 44px（满足移动端最小点击区域） - 图标按钮（如“编辑”“删除”）优先用
border-radius: 50%+width: 36px; height: 36px - 文本链接类按钮（如“查看更多”）保留
border-radius: 0，靠padding和text-decoration区分
disabled 状态不能只靠 opacity
很多模板直接写 button:disabled { opacity: 0.5; }，看起来灰了，但屏幕阅读器可能仍会把它当作可交互元素播报，而且键盘用户按 Tab 还能聚焦到它——这违反 WCAG 2.1。正确做法是同时控制三个属性：
- 显式设置
pointer-events: none，彻底禁用鼠标事件 - 用
cursor: not-allowed提供视觉反馈 - 配合
aria-disabled="true"属性，确保辅助技术识别状态
特别注意：如果按钮的禁用逻辑依赖 JS 动态计算（比如表单校验未通过），不要只改样式，必须同步设置 disabled 属性本身，否则表单提交时仍可能被触发。
立即学习“前端免费学习笔记（深入）”；
hover/focus/active 三态必须分开定义
一套按钮样式里，:hover、:focus、:active 经常被合并写成 button:hover, button:focus，但这会导致键盘用户无法区分聚焦与悬停，也掩盖了触摸设备的点击反馈。真实项目中应明确分离：
-
:hover只用于鼠标悬停，可加轻微背景加深或阴影增强 -
:focus必须有高对比轮廓线（如outline: 2px solid #007bff），且不设outline-offset避免被裁剪 -
:active要模拟按下效果，推荐用transform: translateY(1px)或背景色临时变深，别只靠颜色微调
移动端 Safari 对 :active 支持不稳定，建议额外加 touch-action: manipulation 提升响应灵敏度。
图标按钮的 aria-label 容易漏写
带图标的按钮（如 <button><i class="icon-trash"></i></button>）如果没有文字，就必须提供 aria-label。只写 title 属性是无效的——它不被所有读屏器支持，且鼠标悬停才显示，对键盘用户完全不可见。
正确写法示例：<button aria-label="删除这条记录"><i class="icon-trash"></i></button>。如果图标含义依赖上下文（比如同一个回收站图标在列表项里和在页脚里语义不同），label 内容就得具体化，不能笼统写“删除”。
另外，如果按钮内既有图标又有可见文字（如 <button><i></i> 保存</button>），则不需要 aria-label，但要确保图标用 aria-hidden="true"，避免读屏器重复播报。
