Renkli düğmeler yalnızca birincil işlemler için kullanılmalıdır. Bağlantılar dahil olmak üzere ikincil işlemler için düz (beyaz) bir düğme kullanın. Sonuç olarak, daha önce kırmızı ve yeşil olan tüm düğmeler diğer birincil işlemler gibi mavi olarak oluşturulur. Aşağıdaki stillerden herhangi biri <button>, <input type="submit"> vb. ile de kullanılabilir.
Birincil İkincil Düz Devre dışı
<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>
İlk düğmenin sınıfı button-white ise etiketinin sol kenarı, üstündeki veya altındaki öğelerin sol kenarıyla hizalanmaz. Düğmeye bir button-unindented sınıfı da ekleyerek düğmeyi hizalayabilirsiniz.
İlk düğmenin etiketi bu metin bloğunun sol tarafına hizalanmıyor:
<a class="button button-white" href="#buttons">Button one</a>
<a class="button button-white" href="#buttons">Button two</a>
Artık ilk düğmenin etiketi bu metin bloğuna göre solda hizalanıyor:
<a class="button button-white button-unindented" href="#buttons">Button one</a>
<a class="button button-white" href="#buttons">Button two</a>
Etiketin önünde simge bulunan düğmeler
Düğmenin etiketinden önce bir simge görüntülemek için düğmeye button-with-icon sınıfını ve etiketin metin içeriğinin önüne <span class="material-icons" aria-hidden="true">icon_name</span> ekleyin. Burada icon_name, Material Design simgesi olmalıdır.
<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>
Etiketin ardından simge bulunan düğmeler
Düğmenin etiketinden sonra bir simge görüntülemek için düğmeye button-with-icon sınıfını ve etiketin metin içeriğinin sonuna <span class="material-icons icon-after" aria-hidden="true">icon_name</span> ekleyin. Burada icon_name, bir Material Design simgesidir.
<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>