TL,DR;
- Use buttons for triggering an action
- Use links for navigation
Why does it matter?
Links and buttons are different elements, which serve different purposes. This distinction matters because it affects user expectations.
- Buttons trigger some action, such as showing content on the page that was previously hidden, playing a video, or submitting a form.
- Links take the user to a new location, such as a different web page or an anchor on the current page.
Links and buttons also have different accessibility considerations, such as how a screen reader announces an element as a link or a button.
In HTML, links and buttons are coded differently to allow different behaviors even as it relates to built-in browser and operating system capabilities.
When to use buttons?
Buttons encourage an action from the user. They often have the greatest emphasis on the page.
- Performs an action, like submitting a form
- Summons a dialogue or slideout panel, or changes elements of the website
Example: Clicking the button will take trigger a modal to appear with a checklist.
When to use links
Links are plain text with visual cues that indicate interactivity.
- Links can redirect to an external site or document
- These links should always have the external icon at the end of the link
- A link can redirect you to a new page or a section within the same page
- Allows contextual actions such as opening in a new tab
Example: Clicking the link will take the user to a new page where they can learn about vouchers.
Sources and further reading
Note that these articles might include guides that are not in line with Watson guidelines.
- UX movement — When to use a button or a link
- UXIU — Buttons & links, the basics
- A11y101 — Button vs link (HTML/CSS)
- NNG — Ten usability heuristics
- NNG — Hamburger menus and hidden navs