5.2 forms.button Button

Toggle example guides Toggle HTML markup

In addition to the default styling of <button> and <input type="submit|image|reset|button"> elements, the .button class and its variants can apply buttons styles to various elements (like an <a> link).

Examples
Default styling

Link button Disabled link button

:hover
Hover styling.

Link button Disabled link button

:active
Depressed button styling.

Link button Disabled link button

.button--secondary
Secondary button.

Link button Disabled link button

Markup: forms/button/button.twig 
<p>
  <button class="button {{modifier_class}}" type="button">Standard button</button>
  <button class="button {{modifier_class}}" type="button" disabled>Disabled button</button>
</p>
<p>
  <button class="button {{modifier_class}}" type="submit">Submit button</button>
  <button class="button {{modifier_class}}" type="submit" disabled>Disabled submit button</button>
</p>
<p>
  <button class="button {{modifier_class}}" type="reset">Reset button</button>
  <button class="button {{modifier_class}}" type="reset" disabled>Disabled reset button</button>
</p>
<p>
  <input class="button {{modifier_class}}" type="button" value="Input button">
  <input class="button {{modifier_class}}" type="button" value="Disabled input button" disabled>
</p>
<p>
  <input class="button {{modifier_class}}" type="submit" value="Input submit button">
  <input class="button {{modifier_class}}" type="submit" value="Disabled input submit button" disabled>
</p>
<p>
  <input class="button {{modifier_class}}" type="reset" value="Input reset button">
  <input class="button {{modifier_class}}" type="reset" value="Disabled input reset button" disabled>
</p>
<p>
  <a class="button {{modifier_class}}" href="#">Link button</a>
  <a class="button {{modifier_class}}" disabled href="#">Disabled link button</a>
</p>
Source: forms/button/_button.scss, line 1