Button

About

Buttons

Alternatives

Accessibility

Is that a button or a link? Beware that buttons (real ones that perform actions, eg, form submit button) are activated with keyboard <enter> and <spacebar>. Links are activated only with <enter>.

Button states: https://cloudfour.com/thinks/designing-button-states/) Focus styles: https://css-tricks.com/focusing-on-focus-styles/) Buttons in design systems: https://medium.com/eightshapes-llc/buttons-in-design-systems-eac3acf7e23)

Requirements

Buttons and links that look like buttons need states: initial, focus, hover, active (and focus-visible)

Issues

Examples

Button (action)

Requires CSS to override browser defaults: -webkit-appearance: none, -moz-appearance: none, background-color and border.

<button class="c-button c-button--primary">
    <span class="c-button__body">
        <span class="c-button__text">Button label</span>
    </span>
</button>

Anchor (link) disguised as button

Button label

<a href="./" class="c-button c-button--secondary">
    <span class="c-button__body">
        <span class="c-button__text">Button label</span>
    </span>
</a>