按钮

彩色按钮应仅用于主要操作。对于次要操作（包括链接），请使用普通（白色）按钮。因此，所有以前为红色和绿色的按钮都将像其他主要操作一样呈蓝色。以下任一样式也可以与 <button>、<input type="submit"> 等搭配使用。

主要 辅助 扁平 停用 

<a class="button button-primary" href="#buttons">Primary</a>
<a class="button" href="#buttons">Secondary</a>
<a class="button button-white" href="#buttons">Flat</a>
<a class="button button-disabled" href="#buttons">Disabled</a>

如果第一个按钮具有 button-white 类，则其标签的左边缘将不会与其上方或下方的元素的左边缘对齐。您还可以为按钮添加 button-unindented 类，以使按钮对齐。

第一个按钮的标签未与此文本块左对齐：

按钮一 按钮二 

<a class="button button-white" href="#buttons">Button one</a>
<a class="button button-white" href="#buttons">Button two</a>

现在，第一个按钮的标签与这段文本左对齐：

按钮一 按钮二 

<a class="button button-white button-unindented" href="#buttons">Button one</a>
<a class="button button-white" href="#buttons">Button two</a>

标签前有图标的按钮

如需在按钮的标签前显示图标，请将 button-with-icon 类添加到按钮，并在标签的文本内容前添加 <span class="material-icons" aria-hidden="true">icon_name</span>，其中 icon_name 是 Material Design 图标。

主要 次要 平放 

<a class="button button-with-icon button-primary" href="#buttons">
  <span class="material-icons" aria-hidden="true">add</span>Primary
</a>
<a class="button button-with-icon" href="#buttons">
  <span class="material-icons" aria-hidden="true">add</span>Secondary
</a>
<a class="button button-with-icon button-white" href="#buttons">
  <span class="material-icons" aria-hidden="true">add</span>Flat
</a>

标签后面带有图标的按钮

如需在按钮的标签后面显示图标，请将 button-with-icon 类添加到按钮，并在标签的文本内容后面添加 <span class="material-icons icon-after" aria-hidden="true">icon_name</span>，其中 icon_name 是 Material Design 图标。

主要 辅助 平放 

<a class="button button-with-icon button-primary" href="#buttons">
  Primary<span class="material-icons icon-after" aria-hidden="true">arrow_forward</span>
</a>
<a class="button button-with-icon" href="#buttons">
  Secondary<span class="material-icons icon-after" aria-hidden="true">arrow_forward</span>
</a>
<a class="button button-with-icon button-white" href="#buttons">
  Flat<span class="material-icons icon-after" aria-hidden="true">arrow_forward</span>
</a>