How to make a button that links to a page
Write a normal link, <a href>, and style it with CSS so it looks like a button. It goes to the page like any link, and it keeps every link feature: open in new tab, copy link address, and the URL preview on hover.
The rules that turn a link into a button:
display: inline-blocklets padding push the box open and keeps it in the line of text.text-decoration: noneremoves the underline.colorandbackgroundreplace the blue link color.:focus-visiblegives keyboard users a clear focus ring.
The same class works on a <button>, so a form's submit button and a link to another page can look identical while each does its own job.
Button or link: which element to use
The question is what happens on click, not what it looks like.
| Clicking it | Use | Examples |
|---|---|---|
| Goes to another URL | <a href> | Sign up, Read more, View pricing, Download |
| Changes something on this page | <button type="button"> | Open menu, Play, Add to cart, Show password |
| Sends a form | <button type="submit"> | Log in, Search, Save |
A link announced as "link" and a button announced as "button" tell screen reader users what will happen. Their keyboard behavior differs too: Enter activates both, but Space activates only buttons (on a link, Space scrolls the page). The button element itself is covered in HTML button.
Why not put a button inside a link
This is the pattern most people try first:
<!-- Invalid: interactive content inside <a> -->
<a href="/signup"><button>Sign up</button></a>
<!-- Invalid the other way round, too -->
<button><a href="/signup">Sign up</a></button>
The HTML standard forbids both: <a> and <button> may not contain interactive elements. In practice the keyboard gets two tab stops for one control, a screen reader may announce "link, button, Sign up", and whether a click follows the link depends on the browser. Pick one element.
Why not onclick with location.href
The other common workaround is a button that sets the URL in JavaScript. It looks the same as a link:
(The example uses window.open because the preview must not navigate away; the usual code is location.href = '...'.) Hover and right-click the two: only the real link shows its URL and offers "Open link in new tab" and "Copy link address". The button also gets no Ctrl+click or middle click, the browser does not mark it as visited, and search engines do not follow it as a link. If the destination is a URL, write <a href>.
A form button that opens a URL
There is one case where a <button> that goes to another page is right: when it sends data along. A search box is the classic example. The form's action is the URL and method="get" puts the fields in the query string:
Press Search: on a real page the browser would go to https://duckduckgo.com/?q=html+button+link. The preview shows the data instead of leaving. formaction sends the same form to a different URL from the second button.
Disabled link buttons
Links have no disabled attribute; <a disabled> does nothing. To switch a link button off, remove its href (an <a> without href is not a link and cannot be clicked or focused), and mark it with aria-disabled="true" so the style and screen readers both know:
Press Tab in the preview: focus lands on the first button only. Some sites keep the href and add pointer-events: none instead, but that only blocks the mouse. The link stays reachable with Tab and Enter still follows it.
New tab and download buttons
Every link attribute keeps working on a link styled as a button:
<a class="btn" href="/files/guide.pdf" download>Download the guide</a>
<a class="btn" href="https://github.com/" target="_blank" rel="noopener">GitHub</a>
This is another reason to use <a>: a <button> has no download or target. More on target in open link in new tab.
Common mistakes
- A button inside a link, or a link inside a button. Invalid HTML with unpredictable behavior.
<button onclick="location.href=...">for plain navigation. No new tab, no copy link, no crawling.role="button"on a link that navigates. It tells screen reader users a button is there, and then the page changes. Keep it a link.- Links styled as buttons for actions like "Delete" or "Open menu" with
href="#". If nothing loads, use a<button type="button">. <a disabled>. The attribute does not exist on links. Remove thehref.- Forgetting
display: inline-block, so vertical padding overlaps the lines above and below.
Frequently Asked Questions
How do I make a button that links to another page in HTML?
Use a link and style it like a button: <a href="/signup" class="btn">Sign up</a> with CSS for padding, background, border radius and text-decoration: none. It looks like a button and behaves like a link, which is what it is.
Can I put a button inside an a tag?
No. The HTML standard does not allow interactive content such as <button> inside <a>. Browsers handle it differently, keyboard users get two tab stops for one control, and screen readers announce it confusingly. Use one element.
Does a button have an href attribute?
No. <button> has no href. To send the browser to a URL, use <a href>, or put the button in a <form> with an action (a formaction attribute on the button overrides it).
Is it bad to use onclick with location.href on a button?
It works, but the reader loses everything links give them: middle click and Ctrl+click for a new tab, Copy link address, the URL preview on hover, and search engines do not follow it as a link. Use an <a> when the target is a URL.
How do I disable a link that looks like a button?
Links have no disabled attribute. Remove the href so it stops being a link, add aria-disabled="true", and style it as disabled. Put the href back when it should work again.
