Links vs. Buttons — when should you use which?

I often see websites that use buttons and links (anchor elements <a>) interchangeably. But it’s not hard to get it right, here are the basic guidelines:

Use a link (<a href="/go-here">link</a>) if you want your user to:

  • go to another section on the same page
  • go to another page on your website
  • go to an external website (another domain)

When to use buttons (<button>)

Use a button (<button type="button">button</button>) if you want clicks to trigger an action powered by JavaScript: e.g.:

  • toggle a slide-in menu
  • open popup modal/dialog

A perfect example of when to use <button> is the Moon/Sun icon in the header on this website. When you click it, it toggles the color theme from light to dark.

What about form inputs?

If your user is supposed to submit a form, like a contact form, then you use a submit input element:

<input type="submit" value="Submit" />

Has this been helpful to you?

You can support my work by sharing this article with others, or perhaps buy me a cup of coffee 😊


Share & Discuss on