menu

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>
        

浮动操作按钮

看这个页面的文档

扁平

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

按钮

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

巨大

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

按钮 cloud按钮 cloud按钮

<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布局很有用。

按钮 cloud按钮 cloud按钮

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

禁用

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

按钮 按钮 按钮 add

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