Links vs buttons

Links and buttons are two of the most common interactive elements in interfaces. But they serve different purposes. Misusing them not only confuses users but also harms accessibility and can even mislead assistive technologies.

Links are for navigation. Buttons are for actions. When the distinction is clear, users move confidently through an interface. When it’s blurred, confusion and frustration grow.

Guidelines for choosing between links and buttons.

Use links for navigation

Links (<a>) must be used exclusively for navigation. A link should take the user to another location, either a different page, a section of the same page, or an external resource.

Do not use links for triggering actions (for example: submitting a form, opening a modal, toggling content). For interactive behaviors that do not change the URL, use a <button> instead.

Links may be styled to look like buttons for visual consistency, but they remain semantically links and should preserve their navigation behavior.

References:

• HTML standard – WHATWG

Use buttons for actions

Buttons trigger changes in the current page or system: submit a form, open a modal, toggle a setting. They signal “do something.”

References:

• Button vs link guidelines – Nielsen Norman Group

Style links as buttons when navigation must look like an action

If a navigation element must visually look like a button (for example: “Checkout”), use <a href="…" > with button styling. This preserves correct semantics and accessibility.

References:

• Inclusive components – Heydon Pickering

Ensure accessibility with proper markup

Use <a> with href for links and <button> for actions. Don’t misuse <div> or <span> with click handlers. Assistive technologies rely on correct semantics.

Provide clear focus and hover states

Both links and buttons must have visible focus and hover states for clarity and accessibility.

References:

• WCAG 2.4.7: Focus visible

Frequent mistakes when using links and buttons.

Using buttons for navigation to another page

Buttons are for actions in the current context, not for navigation. This breaks semantics and harms accessibility.

Using links to submit forms or trigger modals

Misleads users and creates accessibility issues.

Mixing visual styles

A link styled as a button, or a button styled as plain text, erodes trust.

Not providing focus styles

Makes it harder for keyboard users to interact reliably.

Underlined text in buttons

Users expect underlined text to be a link. In buttons this breaks the mental model and causes confusion.

Key takeaways for links vs buttons.

• Links navigate, buttons act — keep the distinction clear.
• Use correct HTML semantics (<a> vs <button>) for accessibility and consistency.
• If navigation must look like a button, use a styled link, not a button.
• Provide visible focus and hover states to support all users.
• Avoid underlined text in buttons to prevent confusion.

Getting links and buttons right might seem like a small detail, but it’s fundamental to usable, accessible, and trustworthy interfaces.

Scenario: Auditing interactive elements

Use when auditing an interface for semantic misuse of <a> and <button>, incorrect element choice breaks keyboard behavior and accessibility.

You are a UX-focused design agent. Audit and correct the use of links and buttons across [interface: web application / landing page / dashboard].

Rules:
- The rule:
  a (anchor): navigation — changes the URL or location
  button: action — triggers behavior on the current page

- Use anchor links for:
  Navigation to another page (internal or external)
  Anchor links to page sections
  File downloads with the download attribute
  Email links with mailto
  Skip navigation links

- Use button for:
  Submitting a form
  Opening a modal or dialog
  Toggling UI state (show/hide, expand/collapse)
  Adding, removing, or modifying items
  Playing or pausing media
  Any state change that does not navigate

- Styled link that looks like a button (landing page CTA): still use an anchor element
- Styled button that looks like a link (Cancel action): still use button type="button"

- Keyboard difference — this is why it matters:
  Anchor: activated by Enter only
  Button: activated by Enter and Space
  Using an anchor for an action means Space does nothing — keyboard failure

- Common mistakes to fix:
  Bad: anchor with href="#" and onclick for delete → use button type="button"
  Bad: div with onclick for navigation → use anchor with href
  Bad: anchor with href="#" for form submit → use button type="submit"

Constraints:
- Never use anchor href="#" for actions — use button
- Never use button for navigation — use anchor with href
- Never use div or span with click handlers for any interactive element
- Never assume Space will work on a link — it won't