5.1.1 forms.base.button Buttons

Toggle example guides Toggle HTML markup

Buttons built with the <button> element are the most flexible for styling purposes. But <input> elements with type set to submit, image, reset, or button are also supported.

Below is the default button styling. To see variations on the button styling see the button component.

Examples
Default styling

:hover
Hover styling.

:active:hover
Depressed button styling.

Markup: base/forms/forms-button.twig 
<p>
  <button type="button" class="{{modifier_class}}">Standard button</button>
  <button type="button" class="{{modifier_class}}" disabled>disabled button</button>
</p>
<p>
  <button type="submit" class="{{modifier_class}}">Submit button</button>
  <button type="submit" class="{{modifier_class}}" disabled>Disabled submit button</button>
</p>
<p>
  <button type="reset" class="{{modifier_class}}">Reset button</button>
  <button type="reset" class="{{modifier_class}}" disabled>Disabled reset button</button>
</p>
<p>
  <input type="button" class="{{modifier_class}}" value="Input button">
  <input type="button" class="{{modifier_class}}" value="Disabled input button" disabled>
</p>
<p>
  <input type="submit" class="{{modifier_class}}" value="Input submit button">
  <input type="submit" class="{{modifier_class}}" value="Disabled input submit button" disabled>
</p>
<p>
  <input type="reset" class="{{modifier_class}}" value="Input reset button">
  <input type="reset" class="{{modifier_class}}" value="Disabled input reset button" disabled>
</p>
Source: base/forms/_forms.scss, line 78