前言——这是哪些？

嗨， 较大家良好，我是较小张，今天给较大家讲讲怎么用 Materialize CSS 框架来做按钮。说实话，我也不是啥程序员，只是天天玩网页，看到当前这个框架就想试一试。文章会很较长，希望你能看完，这东西...。

Materialize是哪些？

Materialize 是一个基于 Google Material Design 的 CSS 框架，提供给了很更多预设的样式。 提到这个... 它能够让我们不需要写太更多代码就能做出漂亮的 UI。比如说按钮、表单、卡片等等。

为哪些要用 Materialize？

这是因为它简洁、良好用，而且有很更多颜色能够选。还有波纹效果很酷。 我跟你交个底... 不过如果你想做自己风格的也没关系，能够改样式。

准备工作岗位：先引入文件

在页面里加上这两行：

别忘了引入 Material Icons，如果你想加图标的话：

基本按钮：怎么写？

最最最基本的按钮， 就是把 class 加上 btn：，我可是吃过亏的。

点我

其实还有三种方式来写 button：采用 button 标签、a 标签、input 标签，还有 div 标签。

采用 button 标签

普通按钮

a标签做链接按钮

input标签做提交按钮

div标签也能做“伪”按钮

颜色主题——看起来更酷！

Materialize 有很更多颜色类， 能够直接加在 btn 上， 多损啊！ 举个例子 green、red、blue 等等。

绿色按钮
红色按钮

恕我直言... *tips*：你能够把 waves-effect 换成 waves-light 或者去掉波纹效果，取决于你想要哪种感觉。

不同类型的按钮样式

• .btn-flat：扁平无边框的风格
• .btn-floating：圆形悬浮较小图标
• .waves-block：块级元素波纹
• .disabled：禁用状态

扁平蓝文字
add

结合图标采用——更直观一点儿！

Add 图标到你的 button，让用户一眼就了解作用。

  favorite
  点赞


  send
  发送

*注意*：左边是 left， 右边是 right，这两个类控制图标的位置。 这东西... 如果你想换位置，只要改个类名就行。

尺寸调整——较大中较小都能搞定！

大胆一点... MATERIALIZE 提供给了几种尺寸类：

• .btn-large：较大号按键
• .btn-small：较小号按键
• .waves-block：较宽度撑满父容器
• .waves-circle：圆形波纹
• .waves-float-left / float-right 控制浮动位置
• .center-align / right-align 用于文本对齐
• .lighten-1 / lighten-5 用于细化颜色较深较浅度 ...更更多...

弯道超车。 点击这里 然后再点击那儿！ 错误提示信息有可能会出现，您能够忽略或检查代码。

我直接起飞。 注 请确保全部路径正确，并且服务器允许跨域访问图片和资源条件。

一些常见问题

给力。 1) 为哪些我的波纹效果没有出现？ * 确认 waves-effect 已经加入类名 * 检查 JavaScript 有没有正常加载

4) 怎样自定义颜色？ * 能够采用 class + 自定义 CSS，举个例子 .custom-btn { background-co 记住... lor:#123456;color:white;border-radius:4px;} * 或者直接在 inline style 设置

6) 如果我想让 button 垂直居中怎么办？ * 采用 Flexbox 或 Grid 布局来实现，我惊呆了。

较小结

到繁杂的带图标和自定义尺寸，你能够根据自己的需求自主组合。记住：，绝绝子！

• 引入 css 和 js 是前提
• class 名字一定要跟官方保持一致
• 波纹效果提议保留， 这是因为它符合 Material Design 的 UX 要求

祝你玩得开心，也希望下次看到更专业的文章~

我个人认为... ©2026 较小张个人博客 All Rights Reserved. . 请勿转载未经授权，否则后果严沉重，请尽迅速删除并致歉。 若未及时删除将采取法律制度法规手段进行追究责任。

---