A színes gombokat csak az elsődleges műveletekhez szabad használni. A másodlagos műveletekhez, beleértve a hivatkozásokat is, használjon sima (fehér) gombot. Következésképpen az összes korábban piros és zöld gomb kék színben jelenik meg, mint a többi elsődleges művelet. Az alábbi stílusok bármelyike használható <button> , <input type="submit"> és így tovább.
Elsődleges másodlagos lakás letiltva
<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>
Ha az első gomb button-white osztályú, akkor a címkéjének bal széle nem lesz igazítva a felette vagy alatta lévő elemek bal széléhez. A gombot igazításba húzhatja, ha a gombhoz egy button-unindented osztályt is hozzáad.
Az első gomb címkéje nem balra igazodik ehhez a szövegblokkhoz:
Egyes gomb Második gomb
<a class="button button-white" href="#buttons">Button one</a>
<a class="button button-white" href="#buttons">Button two</a>
Most az első gomb címkéje balra igazodik ehhez a szövegblokkhoz:
Egyes gomb Második gomb
<a class="button button-white button-unindented" href="#buttons">Button one</a>
<a class="button button-white" href="#buttons">Button two</a>
Gombok ikonnal a címke előtt
Ha egy ikont szeretne megjeleníteni a gomb címkéje előtt, adja hozzá a button-with-icon osztályt a gombhoz, és adja hozzá <span class="material-icons" aria-hidden="true">icon_name</span> a gomb szöveges tartalma elé. címke, ahol az ikon_neve egy Material Design ikon .
<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>
Gombok ikonnal a címke után
Ha ikont szeretne megjeleníteni a gomb címke után, adja hozzá a button-with-icon osztályt a gombhoz, és adja hozzá <span class="material-icons icon-after" aria-hidden="true">icon_name</span> a szöveg után a címke tartalma, ahol icon_name egy Material Design ikon.
<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>