17370845950

如何用css框架Materialize制作按钮样式
答案:使用Materialize CSS只需添加btn和waves-effect类即可创建基础按钮,结合颜色类如green、red实现主题样式,通过btn-flat、btn-floating等类扩展类型,配合material-icons可添加图标,left或right控制图标位置,实现美观响应式按钮。

使用 Materialize CSS 框架制作按钮样式非常简单,只需要添加对应的类名即可快速生成美观、响应式的按钮。Materialize 提供了多种预设样式和颜色选项,适用于不同场景。

基础按钮样式

Materialize 中最基础的按钮类是 btn,所有按钮都需要先加上这个类。

  • btn:基础按钮样式
  • btn waves-effect:添加点击波纹效果(推荐加上)

示例:


链接按钮

不同颜色主题的按钮

Materialize 内置了几种颜色类,可以直接使用:

  • btn-primaryblue:主色调蓝色
  • btn-successgreen:成功/绿色
  • btn-dangerred:危险/红色
  • btn-warningorange:警告/橙色

实际使用时,直接将颜色类加在按钮上:


不同类型的按钮样式

除了普通实心按钮,Materialize 还支持其他风格:

  • btn-flat:扁平化按钮,无背景色
  • btn-floating:圆形浮动按钮,常用于 FAB
  • btn-largebtn-small:调整按钮大小

示例:


结合图标使用

Materialize 支持与 Material Icons 结合,让按钮更直观。

确保引入了图标字体,然后使用 i.material-icons 标签插入图标。


使用 leftright 类控制图标位置。

基本上就这些。只要掌握 btnwaves-effect 这两个核心类,再搭配颜色、大小和图标,就能快速做出符合 Material Design 风格的按钮。不复杂但容易忽略细节,比如波纹效果建议始终保留,用户体验更好。