按钮

material design中描述了三种主要的按钮类型。凸起的按钮是表示行为和力图为几乎单调的页面添加深度的标准按钮。浮动的圆形动作按钮主要用于非常重要的功能。平面的按钮通常用于已经用像卡片和模态框一样的深度的元素。

凸起的

<a class="waves-effect waves-light btn">button</a>
<a class="waves-effect waves-light btn"><i class="material-icons left">cloud</i>button</a>
<a class="waves-effect waves-light btn"><i class="material-icons right">cloud</i>button</a>

浮动的

<a class="btn-floating btn-large waves-effect waves-light red"><i class="material-icons">add</i></a>

固定的动作按钮

如果你想要一个固定的浮动动作按钮，你可以添加各种功能，在鼠标移过的时候会出现。我们的演示在页面的底部右下角。

（这个是固定在原来页面的右下角的） （鼠标移过会出现各种小功能按钮）

<div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
    <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();

水平浮动功能按钮

创建一个水平浮动功能按钮是很容易的！只要为按钮添加“horizontal”类即可。

<div class="fixed-action-btn horizontal" style="bottom: 45px; right: 24px;">
 <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" style="bottom: 45px; right: 24px;">
 <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>

平面的

平面的按钮用于减少过度的分层。例如，平面的按钮通常用于卡片或者模态框的功能，这样就不会有过多的阴影。

<a class="waves-effect waves-teal btn-flat">Button</a>

提交按钮

当你用按钮提交表单的时候，不用input标签，而是用带有submit类的button标签。

<button class="btn waves-effect waves-light" type="submit" name="action">Submit
    <i class="material-icons right">send</i>
  </button>

大的按钮

这种按钮为需要更加引起注意的按钮增加了高度。

<a class="waves-effect waves-light btn-large">Button</a>
<a class="waves-effect waves-light btn-large"><i class="material-icons left">cloud</i>button</a>
<a class="waves-effect waves-light btn-large"><i class="material-icons right">cloud</i>button</a>

不可用

这个样式可用于所有按钮类型。

<a class="btn-large disabled">Button</a>
<a class="btn disabled">Button</a>
<a class="btn-flat disabled">Button</a>
<a class="btn-floating disabled"><i class="material-icons">add</i></a>