Spalvoti mygtukai turėtų būti naudojami tik pirminiams veiksmams. Antriniams veiksmams, įskaitant nuorodas, naudokite paprastą (baltą) mygtuką. Todėl visi anksčiau buvę raudoni ir žali mygtukai, kaip ir kiti pagrindiniai veiksmai, atvaizduojami mėlynai. Bet kuris iš toliau pateiktų stilių taip pat gali būti naudojamas su <button> , <input type="submit"> ir pan.
Pirminis antrinis butas neįgalus
<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>
Jei pirmas mygtukas turi button-white klasę, jo etiketės kairysis kraštas nebus sulygiuotas su kairiuoju elementų kraštu virš ar po juo. Mygtuką galite išlygiuoti, taip pat pridėdami button-unindented .
Pirmojo mygtuko etiketė nelygiuojama kairėje su šiuo teksto bloku:
Mygtukas vienas Antras mygtukas
<a class="button button-white" href="#buttons">Button one</a>
<a class="button button-white" href="#buttons">Button two</a>
Dabar pirmojo mygtuko etiketė kairėje lygiuojasi su šiuo teksto bloku:
Mygtukas vienas Antras mygtukas
<a class="button button-white button-unindented" href="#buttons">Button one</a>
<a class="button button-white" href="#buttons">Button two</a>
Mygtukai su piktograma prieš etiketę
Kad prieš mygtuko etiketę būtų rodoma piktograma, prie mygtuko pridėkite klasę button-with-icon ir pridėkite <span class="material-icons" aria-hidden="true">icon_name</span> prieš mygtuko tekstinį turinį. etiketė, kur piktogramos_pavadinimas yra materialaus dizaino piktograma .
<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>
Mygtukai su piktograma po etikete
Kad po mygtuko etiketės būtų rodoma piktograma, prie mygtuko pridėkite klasę button-with-icon ir po tekstu pridėkite <span class="material-icons icon-after" aria-hidden="true">icon_name</span> etiketės turinys, kur icon_name yra materialaus dizaino piktograma.
<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>