Button or link?

Recommendation

Use an anchor with an href for navigation and a native button for an action.

Problem

Something looks clickable. What should it be?

Choose a link or button by behavior

A link opens a guide, downloads a resource, or moves to a page section.
A button submits a form, opens a dialog, or changes a setting. Form submission can still lead to a new page.

Button and link mistakes to avoid

A clickable div that requires rebuilding keyboard behavior.
An anchor with href='#' used for an action; it creates misleading navigation behavior.

Example

Button and link

The button performs an action. The link opens the library.

Browse the library →

Implementation

Start with the semantic HTML element, then apply the visual style you need.
Give actions explicit labels. Set type='button' for non-submit buttons associated with a form.
Preserve link behaviors such as opening in a new tab, copying the destination, and using the context menu.
Keep keyboard focus visible. When a control has visible text, its accessible name must include that text; using the same wording is usually simplest.

Tradeoffs

A link may look like a prominent button while remaining a link. Visual hierarchy and element semantics solve different problems; choose each intentionally.

Verification

Can you Tab to both controls, activate buttons with Enter or Space and links with Enter, and open a link in a new tab?