Kolorowe przyciski powinny być używane tylko do podstawowych działań. W przypadku działań dodatkowych, w tym linków, używaj zwykłego (białego) przycisku. W rezultacie wszystkie przyciski, które wcześniej były czerwone lub zielone, są wyświetlane na niebiesko, tak jak inne podstawowe działania. Każdy z tych stylów można też stosować z elementami <button>, <input type="submit"> itp.
Główny Dodatkowy Płaski Wyłączony
<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>
Jeśli pierwszy przycisk ma klasę button-white, lewa krawędź jego etykiety nie będzie wyrównana z lewą krawędzią elementów znajdujących się nad nim lub pod nim. Możesz wyrównać przycisk, dodając do niego klasę button-unindented.
Etykieta pierwszego przycisku nie jest wyrównana do lewej w przypadku tego bloku tekstu:
<a class="button button-white" href="#buttons">Button one</a>
<a class="button button-white" href="#buttons">Button two</a>
Etykieta pierwszego przycisku jest teraz wyrównana do lewej z tym blokiem tekstu:
<a class="button button-white button-unindented" href="#buttons">Button one</a>
<a class="button button-white" href="#buttons">Button two</a>
przyciski z ikoną przed etykietą.
Aby wyświetlić ikonę przed etykietą przycisku, dodaj do przycisku klasę button-with-icon i przed tekstem etykiety dodaj <span class="material-icons" aria-hidden="true">icon_name</span>, gdzie icon_name to ikona w ramach 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>
przyciski z ikoną po etykiecie.
Aby wyświetlić ikonę po etykiecie przycisku, dodaj do przycisku klasę button-with-icon, a po tekście etykiety dodaj <span class="material-icons icon-after" aria-hidden="true">icon_name</span>, gdzie icon_name to ikona w ramach 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>