When to Use a Link or a Button

Buttons and links can share the same visual style. Their browser behaviour is not interchangeable.

The rule I use is short: a link goes somewhere; a button does something on the current page.

<a href="/contact/">Contact</a>
<a href="/about/">About</a>
<a href="#pricing">Pricing</a>

These destinations can be opened in another tab, copied, bookmarked, or shown in the browser’s status area. Those are link features, not decorative extras.

A link may look like a large call-to-action:

<a class="button" href="/signup/">Sign up</a>

.button {
  display: inline-block;
  padding: 0.75rem 1rem;
  background: black;
  color: white;
  text-decoration: none;
}

It remains a link because activating it navigates to /signup/.

Downloads are links too:

<a href="/files/report.pdf" download>Download report</a>

Interface actions need a button

<button type="button">Open menu</button>
<button type="button">Show filters</button>
<button type="button">Play video</button>

These controls change the current interface. Buttons already have keyboard behaviour, focus semantics, a disabled state, and the correct role for assistive technology.

A button can still look like a text link:

<button class="link-style" type="button">Show more</button>

.link-style {
  padding: 0;
  border: 0;
  background: none;
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}

Choose the element from behaviour, then choose the appearance from the design.

Two shortcuts that create extra work

<div onclick="openMenu()">Menu</div>

The <div> is not automatically focusable or keyboard-operable. Use a button.

<a href="#" onclick="save()">Save</a>

The fake link has a fake destination, changes browser history unless cancelled, and still needs action semantics. Saving is a button job.

Buttons inside forms need a type

<button type="button">Open help</button>
<button type="submit">Send</button>

The default type for a button associated with a form is submit. I write the type explicitly so a harmless interface control does not submit the form after a future refactor.

Tabs, disclosures, menus, and modal triggers are generally buttons because they alter the interface. If the intended result has a meaningful URL, a link is usually the better answer. Styling cannot change that distinction, though it can hide it remarkably well.