HTML Button Link: Make a Button That Opens a Page

By Hugo Corbett · November 12, 2026 · 4 min read

The simplest way to make a button that opens a page is a normal link styled to look like a button: <a class="button" href="/pricing/">See pricing</a>. It works without JavaScript, can be opened in a new tab and is read correctly by screen readers. Use a real <button> only when clicking does something on the page.

That distinction, links go somewhere and buttons do something, decides most of the choices in this guide. Below are the three common approaches, which one to use, and styled examples you can open in HTMLpad and change.

Method 1: a link styled as a button (recommended)

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>Button link</title>
<style>
  .button { display: inline-block; padding: .7rem 1.3rem; border-radius: 8px;
    background: #f25438; color: #151924; font: 600 1rem system-ui, sans-serif;
    text-decoration: none; }
  .button:hover { background: #e0452b; }
  .button:focus-visible { outline: 3px solid #151924; outline-offset: 2px; }
  .button.secondary { background: transparent; border: 2px solid #151924; }
</style></head>
<body>
  <p><a class="button" href="https://example.com/">Get started</a>
     <a class="button secondary" href="https://example.com/docs/">Read the docs</a></p>
</body>
</html>

Try this example in HTMLpad

What each rule does:

• display: inline-block lets the link take padding like a box while staying in the line of text.
• text-decoration: none removes the underline.
• The :hover and :focus-visible rules give feedback with the mouse and with the keyboard. Do not remove the focus outline without replacing it; keyboard users rely on it to see where they are.

Because it is a real link, readers can middle-click it, open it in a new tab, copy its address, and search engines follow it.

Method 2: a button inside a form

A form whose action is the destination also works, and it uses a genuine <button> element:

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>Form button</title></head>
<body>
  <form action="https://example.com/search" method="get">
    <input name="q" placeholder="Search">
    <button>Search</button>
  </form>
</body>
</html>

Try this example in HTMLpad

This is the right choice when the button sends something along with it, such as a search term. For plain navigation it is clumsy: the address gets a question mark added, and readers cannot open the destination in a new tab as easily.

Method 3: a button with an onclick (avoid for navigation)

You will often see this:

<button onclick="location.href='/pricing/'">See pricing</button>

It works when JavaScript runs, but it is a button pretending to be a link. Screen readers announce it as a button, so readers expect an action rather than a new page. It cannot be opened in a new tab, and search engines do not treat it as a link. TPGi's comparison of links and buttons goes through these problems in detail.

Never put a button inside a link

<a href="/pricing/"><button>See pricing</button></a> looks like a shortcut, but interactive elements inside links are invalid HTML, and browsers and assistive technology handle it inconsistently. Style the link itself instead, as in method 1.

Which one to use

Make it a good button

• Say what happens. "Download the guide" beats "Submit". Readers decide whether to click by reading the label.
• Make it big enough to tap. About 44 by 44 pixels is a common minimum for touch, the size the W3C's target size guidance recommends.
• Check the contrast. The text must stand out from the button colour. Dark text on a bright orange, as in the examples, passes; white on light grey usually does not.
• One main button per section. If everything is a big coloured button, nothing stands out. Use a secondary style, like the outlined one above, for the less important choice.

Open it in a new tab, if you must

Add target="_blank" rel="noopener" to the link, exactly as with any other link. The HTML link code guide explains when that helps and when it annoys readers. If you want an image to act as the button instead, see how to make an image a link.

To experiment with colours and sizes, paste one of the examples into the HTML sandbox. For more on changing an existing page, see how to edit an HTML file and the guide to opening HTML files.

Frequently asked questions

How do I make a button link to another page in HTML?

Write a normal link, <a href="/page/">Label</a>, give it a class and style it with padding, a background colour and no underline. It looks like a button and behaves like a link.

Can I put a link inside a button?

No. Placing a link inside a button, or a button inside a link, is invalid HTML and behaves unpredictably. Style the link to look like a button instead.

Should I use a button or a link?

Use a link when the click takes the reader to another page or address. Use a button when the click does something on the current page, such as submitting a form or opening a menu.

How do I make a button link open in a new tab?

Add target="_blank" rel="noopener" to the styled link. A <button> with JavaScript cannot be opened in a new tab by the reader, which is one more reason to use a link.