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:
When to use links (<a>)
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" />