Gumbi

Gumbi u boji trebali bi se koristiti samo za primarne radnje. Za sekundarne radnje, uključujući veze, koristite običan (bijeli) gumb. Posljedično, svi nekadašnji crveni i zeleni gumbi prikazani su plavom bojom kao i druge primarne radnje. Bilo koji od dolje navedenih stilova također se može koristiti s <button> , <input type="submit"> i tako dalje.

Primarni Sekundarni Stan Onesposobljen

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

Ako prvi gumb ima klasu button-white , lijevi rub njegove oznake neće biti poravnat s lijevim rubom elemenata iznad ili ispod njega. Gumb možete povući u poravnanje dodavanjem button-unindented klase na gumb.

Oznaka prvog gumba ne poravnava se lijevo s ovim blokom teksta:

Gumb jedan Gumb dva

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

Sada se oznaka prvog gumba poravnava lijevo s ovim blokom teksta:

Gumb jedan Gumb dva

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

Gumbi s ikonom ispred oznake

Za prikaz ikone prije oznake gumba, dodajte klasu button-with-icon gumbu i dodajte <span class="material-icons" aria-hidden="true">icon_name</span> ispred tekstualnog sadržaja label, gdje je icon_name ikona materijalnog dizajna .

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

Gumbi s ikonom nakon oznake

Za prikaz ikone nakon oznake gumba, dodajte klasu button-with-icon gumbu i dodajte <span class="material-icons icon-after" aria-hidden="true">icon_name</span> nakon teksta sadržaj oznake, gdje je icon_name ikona materijalnog dizajna.

Primarni Sekundarni Flat 

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