按钮组是将多个功能相关的按钮组合在一起的交互组件，在后台管理系统、表单页面、操作面板等场景中应用非常广泛。合理的按钮组样式可以让页面布局更规整，也能降低用户的操作认知成本。通过css可以灵活实现各种风格的按钮组，适配不同的设计需求。
基础按钮组结构搭建
首先我们需要搭建按钮组的基础HTML结构，通常使用一个容器包裹多个按钮元素，结构如下：
<div class="btn-group"> <button class="btn">新增</button> <button class="btn">编辑</button> <button class="btn">删除</button> </div>
这里使用div作为按钮组容器，内部放置三个普通的button元素，后续所有样式都会基于这个结构进行扩展。
水平排列基础按钮组实现
最常见的按钮组是水平排列的，按钮之间没有间隙，相邻按钮共享边框，实现方式如下：
/* 基础按钮样式 */
.btn {
padding: 8px 16px;
border: 1px solid #dcdfe6;
background-color: #fff;
color: #606266;
cursor: pointer;
font-size: 14px;
/* 去除按钮默认的外边距和轮廓 */
margin: 0;
outline: none;
}
/* 按钮组容器样式 */
.btn-group {
display: inline-flex;
/* 让容器内的按钮不换行 */
flex-wrap: nowrap;
}
/* 去除第一个按钮的左侧边框，避免边框叠加 */
.btn-group .btn:not(:first-child) {
border-left: none;
}
/* 鼠标悬停效果 */
.btn:hover {
color: #409eff;
border-color: #c6e2ff;
background-color: #ecf5ff;
}
/* 第一个按钮左侧圆角 */
.btn-group .btn:first-child {
border-radius: 4px 0 0 4px;
}
/* 最后一个按钮右侧圆角 */
.btn-group .btn:last-child {
border-radius: 0 4px 4px 0;
}
这里使用inline-flex布局让按钮组容器内的按钮水平排列，通过not(:first-child)选择器去除非第一个按钮的左侧边框，避免相邻按钮边框叠加变粗。同时给第一个和最后一个按钮设置圆角，让整个按钮组的外形更规整。
垂直排列按钮组实现
如果需要垂直排列的按钮组，只需要调整容器的flex方向即可，样式修改如下：
/* 垂直按钮组容器 */
.btn-group-vertical {
display: inline-flex;
flex-direction: column;
flex-wrap: nowrap;
}
/* 垂直按钮组去除非第一个按钮的上边框 */
.btn-group-vertical .btn:not(:first-child) {
border-top: none;
border-left: 1px solid #dcdfe6;
}
/* 垂直按钮组第一个按钮圆角 */
.btn-group-vertical .btn:first-child {
border-radius: 4px 4px 0 0;
}
/* 垂直按钮组最后一个按钮圆角 */
.btn-group-vertical .btn:last-child {
border-radius: 0 0 4px 4px;
}
垂直按钮组将flex方向设置为column，同时调整边框的去除逻辑，改为去除非第一个按钮的上边框，圆角也对应调整为上下方向的圆角。
带分割线的按钮组实现
有些设计场景中按钮组需要带分割线，分割线比共享边框的样式更清晰，实现方式如下：
/* 带分割线的按钮组容器 */
.btn-group-divided {
display: inline-flex;
gap: 0;
}
/* 分割线样式 */
.btn-group-divided .btn:not(:last-child)::after {
content: "";
display: inline-block;
width: 1px;
height: 16px;
background-color: #dcdfe6;
margin: 0 12px;
vertical-align: middle;
}
/* 按钮样式调整，保留所有边框 */
.btn-group-divided .btn {
border: 1px solid #dcdfe6;
border-radius: 4px;
}
/* 第一个按钮不需要特殊处理，所有按钮都保留完整边框 */
这里使用伪元素::after给每个非最后一个按钮后面添加分割线，按钮保留完整的边框，分割线的间距和颜色可以根据设计需求调整。
按钮组交互状态优化
除了基础样式，还需要优化按钮组的交互状态，比如禁用状态、激活状态，提升用户体验：
/* 禁用状态 */
.btn:disabled {
color: #c0c4cc;
background-color: #f5f7fa;
border-color: #e4e7ed;
cursor: not-allowed;
}
/* 禁用状态悬停无效果 */
.btn:disabled:hover {
color: #c0c4cc;
background-color: #f5f7fa;
border-color: #e4e7ed;
}
/* 激活状态 */
.btn.active {
color: #409eff;
background-color: #ecf5ff;
border-color: #409eff;
}
禁用状态通过:disabled伪类实现，修改颜色、背景和鼠标样式，让用户明确知道按钮不可点击。激活状态可以添加active类，用于标识当前选中的按钮。
不同场景的样式适配
根据页面的不同场景，还可以调整按钮组的尺寸和颜色风格：
- 小尺寸按钮组：将
padding改为6px 12px，字体大小改为12px即可 - 大尺寸按钮组：将
padding改为10px 20px，字体大小改为16px即可 - 主色按钮组：将背景色改为#409eff，文字颜色改为#fff，边框颜色改为#409eff，适配主要操作场景
通过css的灵活调整，按钮组可以适配各种设计需求，开发者只需要根据具体的设计稿修改对应的样式属性即可。