如何在CSS中使用Materialize制作按钮组_通过Materialize组件实现统一按钮样式

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

如何在CSS中使用Materialize制作按钮组_通过Materialize组件实现统一按钮样式

2025-11-25

浏览次数：次

返回列表

使用Materialize框架可通过btn类与Flex布局快速创建响应式按钮组，结合w*es-effect实现波纹交互效果，利用容器控制水平或垂直排列，保持样式统一且无需编写复杂CSS。

如何在css中使用materialize制作按钮组_通过materialize组件实现统一按钮样式

在网页开发中，按钮组常用于导航、筛选或操作控制。使用 Materialize 框架可以快速实现样式统一且响应式的按钮组，无需从零编写 CSS。Materialize 基于 Material Design 设计语言，提供了一套现成的类名来构建美观、一致的界面元素。

使用 Materialize 创建基础按钮组

Materialize 通过 btn-group 的逻辑结构结合其内置按钮类来实现按钮组。虽然 Materialize 没有直接叫 .btn-group 的类（像 Bootstrap 那样），但可以通过组合 .btn 和容器布局轻松实现。

基本步骤如下：

使用一个容器（如 <div class="btn-group">）包裹多个按钮 <li>每个按钮应用 <code>class="btn"
可选：为按钮添加颜色类，如 blue、red 或 w*es-effect

示例代码：

<div class="btn-group" style="display: flex;">
  <button class="btn blue w*es-effect">选项1</button>
  <button class="btn blue w*es-effect">选项2</button>
  <button class="btn blue w*es-effect">选项3</button>
</div>

实现水平与垂直排列的按钮组

通过调整容器的 Flexbox 布局方式，可以轻松切换按钮组的方向。

水平排列是默认行为，只需设置容器为 display: flex。

AI智能阅读辅助工具

314

查看详情

垂直排列则需要设置 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 的波纹点击效果，只需为按钮添加 w*es-effect 类即可启用。

若要增强交互感，还可以结合 w*es-light 实现浅色波纹，适合深色背景。

所有按钮建议统一添加 w*es-effect 保持体验一致
颜色类如 red、teal 可直接附加在 btn 后使用
可通过自定义 CSS 微调圆角或间距，例如 border-radius: 4px;

带波纹效果的彩色按钮组：

<div style="display: flex; gap: 8px;">
  <button class="btn red w*es-effect w*es-light">取消</button>
  <button class="btn green w*es-effect w*es-light">确认</button>
</div>