Links as buttons

CHRISTOPHER: I'm not sure what to say about this. - Amber
Status:
In use

You can give a link a background color, but the text must remain underlined.

  • Make sure that there is adequate padding between the text and the border's edge: minimum is 0.5em.
  • If a background is used, use text-decoration: underline; by default, and text-decoration: none; is used with :hover
  • The contrast must be WCAG AA compliant.
  • While links can be styled as buttons, buttons CANNOT be styled to look like links.

Using icons as link buttons

When using an icon as a link (and it's not accompanied by visible text), there should not be an underline by default, but the icon will underline upon "hover".

Make sure that there is sufficient spacing between the icon (in button form) and copy — typically no less than 0.5em.

 

Components

Utilities