使用Materialize框架可通过btn类与Flex布局快速创建响应式按钮组，结合waves-effect实现波纹交互效果，利用容器控制水平或垂直排列，保持样式统一且无需编写复杂CSS。
在网页开发中，按钮组常用于导航、筛选或操作控制。使用 Materialize 框架可以快速实现样式统一且响应式的按钮组，无需从零编写 CSS。Materialize 基于 Material Design 设计语言，提供了一套现成的类名来构建美观、一致的界面元素。
使用 Materialize 创建基础按钮组
Materialize 通过 btn-group 的逻辑结构结合其内置按钮类来实现按钮组。虽然 Materialize 没有直接叫 .btn-group 的类（像 Bootstrap 那样），但可以通过组合 .btn 和容器布局轻松实现。
基本步骤如下：
- 使用一个容器（如
<div class="btn-group">）包裹多个按钮 - 每个按钮应用
class="btn" - 可选：为按钮添加颜色类，如
blue、red或waves-effect
<div class="btn-group" style="display: flex;"> <button class="btn blue waves-effect">选项1</button> <button class="btn blue waves-effect">选项2</button> <button class="btn blue waves-effect">选项3</button> </div>
实现水平与垂直排列的按钮组
通过调整容器的 Flexbox 布局方式，可以轻松切换按钮组的方向。
立即学习“前端免费学习笔记（深入）”；
水平排列是默认行为，只需设置容器为 display: flex。
垂直排列则需要设置 flex-direction: column。
- 水平按钮组适合工具栏或标签页切换
- 垂直按钮组可用于侧边菜单或设置项
<div class="btn-group" style="display: flex; flex-direction: column; max-width: 200px;"> <button class="btn indigo">新建</button> <button class="btn indigo">编辑</button> <button class="btn indigo">删除</button> </div>
添加悬停效果与波纹动画
Materialize 内置了 Material Design 的波纹点击效果，只需为按钮添加 waves-effect 类即可启用。
若要增强交互感，还可以结合 waves-light 实现浅色波纹，适合深色背景。
- 所有按钮建议统一添加
waves-effect保持体验一致 - 颜色类如
red、teal可直接附加在btn后使用 - 可通过自定义 CSS 微调圆角或间距，例如
border-radius: 4px;
<div style="display: flex; gap: 8px;"> <button class="btn red waves-effect waves-light">取消</button> <button class="btn green waves-effect waves-light">确认</button> </div>
基本上就这些。利用 Materialize 的 .btn 类和 Flex 布局，你可以快速搭建出风格统一、交互自然的按钮组，无需额外写复杂样式。关键是保持类名规范，并合理使用容器控制布局。不复杂但容易忽略细节，比如波纹类要和颜色搭配好，才能体现 Material Design 的质感。
