material design中有三种类型的按钮。凸起的按钮是一个标准的按钮，表示动作，相对于页面有一个深度。悬浮的圆形动作按钮表示很重要的功能。平面按钮通常用于已经有深度的卡片会模态。
凸起的
按钮 cloud按钮 cloud按钮
<a class="waves-effect waves-light btn">按钮</a>
<a class="waves-effect waves-light btn"><i class="material-icons left">cloud</i>按钮</a>
<a class="waves-effect waves-light btn"><i class="material-icons right">cloud</i>按钮</a>
悬浮
add
<a class="btn-floating btn-large waves-effect waves-light red"><i class="material-icons">add</i></a>
固定动作按钮
如果你想固定悬浮动作按钮，你可以增加多个动作悬浮的显示。我们的示例在右下角。
<div class="fixed-action-btn">
<a class="btn-floating btn-large red">
<i class="large material-icons">mode_edit</i>
</a>
<ul>
<li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
<li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
<li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
<li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
</ul>
</div>
你也可以通过程序打开或关闭悬浮固定按钮菜单。
$('.fixed-action-btn').openFAB();
$('.fixed-action-btn').closeFAB();
$('.fixed-action-btn.toolbar').openToolbar();
$('.fixed-action-btn.toolbar').closeToolbar();
水平垂直固定按钮
创建一个水平固定按钮很简单，只要增加一个类horizontal到悬浮固定按钮中。
<div class="fixed-action-btn horizontal">
<a class="btn-floating btn-large red">
<i class="large material-icons">mode_edit</i>
</a>
<ul>
<li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
<li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
<li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
<li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
</ul>
</div>
单击显示的悬浮固定按钮
如果你想禁用悬浮并用点击取代触发固定悬浮按钮菜单，只要增加类click-to-toggle到固定悬浮按钮中。
<div class="fixed-action-btn horizontal click-to-toggle">
<a class="btn-floating btn-large red">
<i class="material-icons">menu</i>
</a>
<ul>
<li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
<li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
<li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
<li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
</ul>
</div>
工具条中的固定悬浮按钮
在你点击固定悬浮按钮时显示一个工具条而不是单独的按钮菜单。只要增加toolbar类到你的悬浮固定按钮中。
<div class="fixed-action-btn toolbar">
<a class="btn-floating btn-large red">
<i class="large material-icons">mode_edit</i>
</a>
<ul>
<li class="waves-effect waves-light"><a href="#!"><i class="material-icons">insert_chart</i></a></li>
<li class="waves-effect waves-light"><a href="#!"><i class="material-icons">format_quote</i></a></li>
<li class="waves-effect waves-light"><a href="#!"><i class="material-icons">publish</i></a></li>
<li class="waves-effect waves-light"><a href="#!"><i class="material-icons">attach_file</i></a></li>
</ul>
</div>
扁平
扁平按钮通常被用来减少过度的分层。例如：扁平按钮通常用于一张卡片或一个模态内的动作，这样就不会有太多重叠的阴影。
按钮
<a class="waves-effect waves-teal btn-flat">按钮</a>
提交按钮
当你使用一个按钮提交表单，而不是一个input标签时，只需给按钮增加一个type="submit"。
<button class="btn waves-effect waves-light" type="submit" name="action">提交
<i class="material-icons right">send</i>
</button>