按钮 - Materialize 中文

Material Design 中描述了 3 种主要的按钮类型。凸起按钮是一种标准按钮，表示操作，并旨在为一个基本扁平的页面增加深度。浮动圆形操作按钮用于非常重要的功能。扁平按钮通常用于已经具有深度的元素中，例如卡片或模态框。


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

浮动操作按钮

请参阅此页面上的文档

扁平按钮用于减少过多的层叠。例如，扁平按钮通常用于卡片或模态框中的操作，因此不会有太多重叠的阴影。

按钮


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

当您使用按钮提交表单时，请使用具有提交类型的按钮标签，而不是使用输入标签


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

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

按钮按钮按钮


<a class="waves-effect waves-light btn-small">Button</a>
<a class="waves-effect waves-light btn-small"><i class="material-icons left">cloud</i>button</a>
<a class="waves-effect waves-light btn-small"><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>

凸起

浮动

浮动操作按钮

扁平

提交按钮

大

小

禁用