如何通过css实现按钮组样式-css教程-PHP中文网

如何通过css实现按钮组样式

P粉602998670

发布： 2025-10-04 17:14:02

原创

747人浏览过

使用Flexbox布局可轻松实现美观的按钮组，通过gap控制间距、border-radius统一圆角，并利用active类突出选中状态；连体按钮通过margin-left:-1px和overflow:hidden实现无缝连接；垂直排列适用于移动端，配合响应式设计提升用户体验。

如何通过css实现按钮组样式

要实现一个美观且功能清晰的按钮组样式，关键是使用合适的 CSS 布局方式和视觉设计。下面介绍几种常见且实用的方法来构建按钮组。

使用 Flexbox 布局排列按钮

Flexbox 是实现按钮组最简单有效的方式，能让按钮在同一行对齐，并自动分配间距。

示例代码：

<div class="button-group">
  <button class="btn">上一页</button>
  <button class="btn active">1</button>
  <button class="btn">2</button>
  <button class="btn">3</button>
  <button class="btn">下一页</button>
</div>

登录后复制

CSS 样式说明：

立即学习“前端免费学习笔记（深入）”；

display: flex 让所有按钮水平排列
gap 控制按钮之间的间距
统一设置 padding、border、border-radius 保证外观一致
通过 .active 类突出当前选中项

实现连体按钮（无间隙，边框合并）

适用于需要紧凑排列的场景，比如工具栏或分页控件。

壁纸样机神器

免费壁纸样机生成

查看详情

关键技巧：只保留最左和最右按钮的圆角，中间按钮取消左右边框。

<div class="button-group-joined">
  <button class="btn-joined active">选项一</button>
  <button class="btn-joined">选项二</button>
  <button class="btn-joined">选项三</button>
</div>

登录后复制

要点：

父容器设置 overflow: hidden 避免边框重叠错乱
使用 :first-child 和 :last-child 单独控制圆角
中间按钮用 margin-left: -1px 覆盖边框，实现无缝连接

响应式与垂直排列

在小屏幕上，可切换为垂直堆叠布局。

<div class="button-group-vertical">
  <button class="btn-vertical">保存草稿</button>
  <button class="btn-vertical">预览</button>
  <button class="btn-vertical">发布</button>
</div>

登录后复制

适用场景：