Short answer: Use a link when the control takes people somewhere, and a button when it does something on the page. A link needs a real URL in its href; a button sends a form, opens a menu or plays audio. Choose by what the control does, not by how it looks.
What a link and a button each do
MDN describes the a element, with its href attribute, as a hyperlink to web pages, files, email addresses, places in the same page or anything else a URL can address.
MDN calls a button an interactive element that people activate with a mouse, keyboard, finger or voice. Once activated, it performs an action, such as submitting a form or opening a dialog.
Which one to use
| Situation | Use | Why |
|---|---|---|
| Go to another page | A link with an href | It takes people to a URL |
| Jump to a section of the same page | A link to the section’s id | It goes to a place, inside the page |
| Download a file | A link to the file | MDN lists files among the things a link points to |
| Send a form | A button | It performs an action |
| Open a menu, a dialog or a panel | A button | MDN gives opening a dialog as a button’s action |
| Play audio or switch the theme | A button | It changes something on the page |
| Start a process on another page | A link styled as a button | GOV.UK’s start buttons work this way |
From MDN and the GOV.UK Design System, read November 5, 2026.
GOV.UK’s start buttons don’t send form data, so they’re built as links that look like buttons.
What goes wrong with fake buttons and fake links
MDN warns about links used as buttons with an href of # or javascript:void(0). They break copying, opening in a new tab and bookmarking, and they fail while JavaScript loads, errors or is off. Screen readers also get the wrong meaning.
The keys differ too. People expect buttons to work with Space or Enter and links with Enter, so a link dressed as a button needs extra code for Space. MDN’s advice is to match the look to the function and use a native button where possible.
Adding role="button" to a link changes what screen readers announce, but not how the keys behave. Our what is ARIA guide explains why native elements come first.
What to write on them
GOV.UK asks for button text that describes the action it performs. It also warns that several main calls to action on one page make it harder to know what to do next.
For links, WebAIM asks for text that makes sense out of context, so phrases such as “click here” or “more” don’t work alone. Our call to action guide covers the wording of the main ones.
How to check your buttons and links
- List every control people can click or tap on the page.
- For each one, ask whether it takes people somewhere or does something on the page.
- Make the ones that go somewhere links with a real href, never # or javascript:void(0).
- Make the ones that act button elements, and inside a form give type="button" to any that shouldn’t send it.
- Check that links work with Enter and buttons with Enter and Space; our keyboard navigation guide covers the test.
- Read each label on its own and check that it says what happens.
- Open the accessibility tree and check that each control shows as a link or a button, as you meant; our semantic HTML guide explains the tree.
What our own controls are made of
On November 5, 2026, we went through the controls on our home page, a guide and the contact page, in English and Spanish. We checked each page at desktop and phone sizes. Everything that acts on the page is a button element. Among them are the menu, the light and dark switch, the audio player, the chat, the form’s send button and the cookie choices.
Every link that looks like a button takes people somewhere. “Write to us” opens our contact page, “Write to us on WhatsApp” opens WhatsApp, and “Send us a message” moves down to the form on the home page.
No button sat inside a link or a link inside a button, and no link carried role="button" to pass for a button. The only buttons inside a form were the ones that send it.
Before you publish
- Links have a real href, not # or javascript:void(0).
- Actions on the page use button elements.
- Buttons inside a form that shouldn’t send it carry type="button".
- Links styled as buttons still take people somewhere.
- No button sits inside a link, and no link inside a button.
- Every label says what happens.
RememberAsk what the control does. If it takes people somewhere, it’s a link; if it does something here, it’s a button.
Our web design service settles this for every control on a page.
Quick answers about buttons and links
When should I use a button instead of a link?
Use a button when the control does something on the page, such as sending a form, opening a menu or playing audio. Use a link when it takes people to another page or another place. MDN puts it simply: use a hyperlink for navigation to a real URL.
Can a link look like a button?
Yes. GOV.UK’s start buttons are links styled as buttons, because they take people to the next page instead of sending form data. What decides the element is what the control does, not how it looks.
Why is href="#" a problem?
MDN explains that fake values like # or javascript:void(0) break copying, opening in a new tab and bookmarking. They also fail while JavaScript is loading, when it errors or when it’s turned off, and they tell screen readers the wrong thing.
Which keys work on buttons and links?
MDN notes that people expect to trigger buttons with Space or Enter, and links with Enter. A native button and a native link handle those keys on their own, while a fake one needs extra code for each.
What should a button or a link say?
What happens next. GOV.UK asks for button text that describes the action. WebAIM asks for links that make sense out of context, so phrases such as click here or more don’t work on their own.
Sources
Read on November 5, 2026. MDN Web Docs: HTML anchor element, HTML button element and ARIA: button role. GOV.UK Design System: Button. WebAIM: Links and Hypertext. Our case: our own pages, read in a browser on November 5, 2026.