Butonat

Butonat me ngjyra duhet të përdoren vetëm për veprimet kryesore. Për veprime dytësore, duke përfshirë lidhjet, përdorni një buton të thjeshtë (të bardhë). Rrjedhimisht, të gjithë butonat e dikurshëm të kuq dhe jeshil janë dhënë në ngjyrë blu si veprimet e tjera kryesore. Çdo stil i mëposhtëm mund të përdoret gjithashtu me <button> , <input type="submit"> , e kështu me radhë.

Banesë parësore sekondare me aftësi të kufizuara

<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>

Nëse butoni i parë ka klasën button-white , skaji i majtë i etiketës së tij nuk do të përafrohet me skajin e majtë të elementeve sipër ose poshtë tij. Ju mund ta tërhiqni butonin në shtrirje duke shtuar gjithashtu një klasë button-unindented në buton.

Etiketa e butonit të parë nuk përputhet majtas me këtë bllok teksti:

Butoni një Butoni dy

<a class="button button-white" href="#buttons">Button one</a>
<a class="button button-white" href="#buttons">Button two</a>

Tani etiketa e butonit të parë rreshtohet majtas me këtë bllok teksti:

Butoni një Butoni dy

<a class="button button-white button-unindented" href="#buttons">Button one</a>
<a class="button button-white" href="#buttons">Button two</a>

Butonat me një ikonë përpara etiketës

Për të shfaqur një ikonë përpara etiketës së butonit, shtoni klasën button-with-icon në buton dhe shtoni <span class="material-icons" aria-hidden="true">icon_name</span> përpara përmbajtjes së tekstit të etiketë, ku icon_name është një ikonë Material Design .

Primar E mesme Flat

<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>

Butonat me një ikonë pas etiketës

Për të shfaqur një ikonë pas etiketës së butonit, shtoni klasën button-with-icon në buton dhe shtoni <span class="material-icons icon-after" aria-hidden="true">icon_name</span> pas tekstit përmbajtjen e etiketës, ku icon_name është një ikonë Material Design.

Primar dytësore Shtimi sheshtë

<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>