使用Flexbox布局可轻松实现美观的按钮组，通过gap控制间距、border-radius统一圆角，并利用active类突出选中状态；连体按钮通过margin-left:-1px和overflow:hidden实现无缝连接；垂直排列适用于移动端，配合响应式设计提升用户体验。
要实现一个美观且功能清晰的按钮组样式，关键是使用合适的 CSS 布局方式和视觉设计。下面介绍几种常见且实用的方法来构建按钮组。
使用 Flexbox 布局排列按钮
Flexbox 是实现按钮组最简单有效的方式，能让按钮在同一行对齐，并自动分配间距。
示例代码：
.button-group { display: flex; gap: 2px; margin: 10px;}.btn { padding: 8px 16px; border: 1px solid #ccc; background-color: #fff; color: #333; cursor: pointer; border-radius: 4px; font-size: 14px;}.btn:hover { background-color: #f0f0f0;}.btn.active { background-color: #007bff; color: white; border-color: #007bff;}
CSS 样式说明：
立即学习“前端免费学习笔记（深入）”；
display: flex 让所有按钮水平排列 gap 控制按钮之间的间距 统一设置 padding、border、border-radius 保证外观一致 通过 .active 类突出当前选中项
实现连体按钮（无间隙，边框合并）
适用于需要紧凑排列的场景，比如工具栏或分页控件。
Reclaim.ai
为优先事项创建完美的时间表
90 查看详情 
关键技巧：只保留最左和最右按钮的圆角，中间按钮取消左右边框。
.button-group-joined { display: flex; border-radius: 6px; overflow: hidden; margin: 10px 0;}.btn-joined { padding: 10px 16px; border: 1px solid #007bff; background-color: #fff; color: #007bff; cursor: pointer; font-size: 14px; margin: 0;}.btn-joined:first-child { border-top-left-radius: 6px; border-bottom-left-radius: 6px;}.btn-joined:last-child { border-top-right-radius: 6px; border-bottom-right-radius: 6px;}.btn-joined:not(:first-child) { margin-left: -1px;}.btn-joined:hover { background-color: #e9f0ff;}.btn-joined.active { background-color: #007bff; color: white;}
要点：
父容器设置 overflow: hidden 避免边框重叠错乱 使用 :first-child 和 :last-child 单独控制圆角 中间按钮用 margin-left: -1px 覆盖边框，实现无缝连接
响应式与垂直排列
在小屏幕上，可切换为垂直堆叠布局。
.button-group-vertical { display: flex; flex-direction: column; max-width: 200px;}.btn-vertical { padding: 10px; border: 1px solid #ddd; background: #fafafa; text-align: center; cursor: pointer;}.btn-vertical:first-child { border-top-left-radius: 6px; border-top-right-radius: 6px;}.btn-vertical:last-child { border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;}.btn-vertical + .btn-vertical { margin-top: -1px;}
适用场景：
移动端操作菜单 侧边工具栏 需要强调操作顺序的按钮组
基本上就这些。通过 Flexbox 结合边框、圆角和状态类，可以灵活实现各种按钮组样式。关键是保持视觉一致性，并考虑交互反馈（如 hover 和 active 状态）。不复杂但容易忽略细节。
以上就是如何通过css实现按钮组样式的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1031568.html
微信扫一扫 
支付宝扫一扫 
