Nuppude efektid

Preview 
<button class="button ">
    Primaarne
</button>
<button class="button button--secondary  ">
    Sekundaarne
</button>
<button class="button button--contrast  ">
    Kontrastne
</button>
<button class="button button--triarity  ">
    Tertsiaarne
</button>
 
/* No context defined for this component. */

Hover

Preview 
<button class="button is-hover">
    Primaarne
</button>
<button class="button button--secondary  is-hover">
    Sekundaarne
</button>
<button class="button button--contrast  is-hover">
    Kontrastne
</button>
<button class="button button--triarity  is-hover">
    Tertsiaarne
</button>
 
{
  "state": "is-hover"
}

Active

Preview 
<button class="button is-active">
    Primaarne
</button>
<button class="button button--secondary  is-active">
    Sekundaarne
</button>
<button class="button button--contrast  is-active">
    Kontrastne
</button>
<button class="button button--triarity  is-active">
    Tertsiaarne
</button>
 
{
  "state": "is-active"
}

Disabled

Preview 
<button class="button is-disabled">
    Primaarne
</button>
<button class="button button--secondary  is-disabled">
    Sekundaarne
</button>
<button class="button button--contrast  is-disabled">
    Kontrastne
</button>
<button class="button button--triarity  is-disabled">
    Tertsiaarne
</button>
 
{
  "state": "is-disabled"
}