用原生HTML+CSS可实现多功能组合按钮：通过<button>语义化标签、aria-pressed等属性控制状态，结合:hover、:active、:focus-visible及属性选择器（如button[aria-pressed="true"]）驱动样式，SVG图标内联确保一致性，禁用态同步disabled属性与CSS，兼顾可访问性与移动端反馈。
如何用原生 HTML + CSS 实现多功能组合按钮
没有 JavaScript 也能做出带状态切换、图标+文字、悬停反馈的组合按钮，关键在合理利用 <button> 的语义、aria-pressed 控制可访问性，以及 CSS 的 :hover、:active、:focus-visible 和伪元素。
别用 <div onclick="..."> 模拟按钮——屏幕阅读器不会识别它为可交互控件，键盘用户无法用空格/回车触发，且默认不带焦点样式。
常见错误现象：button 点击后状态不保留、图标错位、移动端点击无反馈、禁用态颜色和指针样式没同步。
- 用
<button type="button">显式声明类型，避免表单意外提交 - 切换状态时，用
aria-pressed="true/false"而不是自定义data-属性，确保 AT（辅助技术）能感知 - 图标优先用 SVG 内联，避免字体图标加载失败或尺寸漂移；SVG 宽高设为
1em以匹配文字行高 - 禁用态必须同时设置
disabled属性和opacity: 0.5; pointer-events: none;，否则 CSS 伪类可能失效
让组合按钮支持“开关”“菜单触发”“多操作切换”三种模式
同一按钮 DOM 结构可以复用，靠 aria-pressed、aria-expanded、aria-haspopup 等属性区分行为语义，CSS 用属性选择器驱动样式变化。
立即学习“前端免费学习笔记（深入）”；
例如开关按钮：初始 aria-pressed="false"，点击后 JS 切换值，CSS 用 button[aria-pressed="true"] 改背景色和图标旋转；菜单按钮则用 button[aria-expanded="true"] 显示下拉箭头动画。
性能影响很小——纯 CSS 属性选择器比 class 切换更轻量，且避免了频繁 classList 操作引发的重排。
- 开关模式：绑定
aria-pressed，配合toggleAttribute("aria-pressed") - 菜单触发：同时设
aria-expanded和aria-haspopup="menu"，下拉内容用<div role="menu">包裹 - 多操作切换（如“编辑/保存/取消”）：用
data-state="edit"管理内部状态，CSS 用button[data-state="save"]控制文字和图标
移动端点击反馈与 focus 样式冲突怎么解
iOS Safari 默认给 button 加灰色半透明 overlay，Android Chrome 有时不触发 :active。直接删掉 -webkit-tap-highlight-color: transparent 会破坏可访问性——屏幕阅读器依赖该反馈确认操作已生效。
正确做法是保留 tap highlight，但用 :active 叠加更明确的视觉变化（比如背景加深 10%），并确保 :focus-visible 仅在键盘导航时出现，避免鼠标点击后残留环形轮廓。
- 不要写
button:focus { outline: none; }—— 这会彻底禁用焦点指示，违反 WCAG 2.4.7 - 改用
button:focus:not(:focus-visible) { outline: none; }，让键盘用户有轮廓、鼠标用户无干扰 - 移动端测试必做：真机点按，观察是否延迟响应、是否误触邻近元素、是否触发缩放
- 图标按钮必须加
aria-label，纯图标无文字时尤其关键
为什么不用第三方组件库？这些细节它通常不管
像 Bootstrap 或 Ant Design 的 Button.Group 往往只处理布局对齐和基础 hover，不暴露 aria-pressed 控制逻辑，也不适配 prefers-reduced-motion 或深色模式自动切换。
你得自己补 JS 绑定、自己写媒体查询适配、自己修 focus ring 在圆角按钮上的裁剪问题——而原生方案从一开始就把这些变量纳入设计。
容易被忽略的一点：组合按钮的宽度常由内容撑开，但表格内或侧边栏中需要固定宽度时，min-width 和 text-overflow: ellipsis 必须配合 white-space: nowrap 使用，否则文字换行会破坏图标对齐。
