Buttons are used to signal actions e.g. create a new game task.
Normally buttons contain text, but also at some places an white icon inside might be wanted.
In HTML we can use the button or link tag, although any other tag can be used, when giving him the .btn class.
<a href="#" class="btn">Default Button</a>
<button tabindex="0" class="btn"> Default Button </button>A normal, clickable button gets bigger when you hover it.
<a href="#" class="btn btn--active">Active Button</a>
<button tabindex="0" class="btn btn--active"> Active Button </button>An active button does not display the text anymore and pointer events will not occur any longer.
<a href="#" class="btn btn--disabled">Disabled Button</a>
<button tabindex="0" class="btn btn--disabled" aria-disabled="true" disabled> Disabled Button </button>A button can be disabled, pointer events will not occur. No interaction is possible.
<a href="#" class="btn btn__icon"><img class="icon" src="{{ site.baseurl }}/src/assets/images/plus.svg" alt="btn-icon" /></a>
<button class="btn btn__icon"> <img class="icon" src="{{ site.baseurl }}/src/assets/images/plus.svg" alt="btn-icon" /> </button>A button can also include an image/icon instead of text.