按钮 - Materialize

material design中有三种类型的按钮。凸起的按钮是一个标准的按钮，表示动作，相对于页面有一个深度。悬浮的圆形动作按钮表示很重要的功能。平面按钮通常用于已经有深度的卡片会模态。


<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>


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

浮动操作按钮

看这个页面的文档

扁平按钮通常被用来减少过度的分层。例如：扁平按钮通常用于一张卡片或一个模态内的动作，这样就不会有太多重叠的阴影。

按钮


  <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>

给按钮一个更大的高度使按钮更引人注意。

按钮按钮按钮


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

当鼠标和键盘是主要的输入方法时，这个较小的按钮对于密集的UI布局很有用。

按钮按钮按钮


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

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

按钮按钮按钮


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

凸起的

悬浮

浮动操作按钮

扁平

提交按钮

巨大

小的

禁用