Butoanele colorate trebuie folosite numai pentru acțiunile principale. Pentru acțiuni secundare, inclusiv linkuri, utilizați un buton simplu (alb). În consecință, toate butoanele anterior roșii și verzi sunt redate în albastru ca și alte acțiuni primare. Oricare dintre stilurile de mai jos poate fi folosit și cu <button> , <input type="submit"> și așa mai departe.
Primar Secundar Apartament Dezactivat
<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>
Dacă primul buton are clasa button-white , marginea stângă a etichetei sale nu va fi aliniată cu marginea stângă a elementelor de deasupra sau dedesubtul acesteia. Puteți trage butonul în aliniere adăugând, de asemenea, o clasă button-unindented la buton.
Eticheta primului buton nu se aliniază la stânga cu acest bloc de text:
<a class="button button-white" href="#buttons">Button one</a>
<a class="button button-white" href="#buttons">Button two</a>
Acum eticheta primului buton se aliniază la stânga cu acest bloc de text:
<a class="button button-white button-unindented" href="#buttons">Button one</a>
<a class="button button-white" href="#buttons">Button two</a>
Butoane cu o pictogramă înaintea etichetei
Pentru a afișa o pictogramă înaintea etichetei butonului, adăugați clasa button-with-icon la buton și adăugați <span class="material-icons" aria-hidden="true">icon_name</span> înainte de conținutul text al etichetă, unde icon_name este o pictogramă 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>
Butoane cu o pictogramă după etichetă
Pentru a afișa o pictogramă după eticheta butonului, adăugați clasa button-with-icon la buton și adăugați <span class="material-icons icon-after" aria-hidden="true">icon_name</span> după text conținutul etichetei, unde icon_name este o pictogramă 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>