How to Make an HTML Button Act Like a Link

By the end of this page, you will understand the difference between links and buttons in HTML, when to use each one, and the most accessible way to create a clickable element that sends the user to another page. You will also see common patterns, mistakes to avoid, and practical examples you can use right away.

In HTML, links and buttons are not the same thing, even if they can sometimes look similar.

• An anchor element (<a>) is used for navigation.
• A button element (<button>) is used for actions like submitting a form, opening a menu, or triggering JavaScript.

If clicking an element should take the user to another page, the correct semantic choice is usually a link, not a button.

Example:

<a href="/about">Go to About Page</a>

This matters because browsers, screen readers, keyboards, search engines, and other tools all understand links and buttons differently.

Why this matters

Using the right element improves:

• Accessibility: screen readers announce links and buttons differently
• Keyboard support: links and buttons behave differently with Enter and Space
• Browser behavior: links support opening in a new tab, copying the link address, and normal navigation features
• Code clarity: other developers can understand your intent immediately

If you want something to look like a button but behave like a link, the usual solution is:

<a href="/contact" class="button-link">Contact Us</a>

Then style the link with CSS so it appears like a button.

What about using <button> for navigation?

A button can redirect the user with JavaScript, for example:

<button onclick="window.location.href='/contact'">Contact Us</button>

This works, but it is usually not the best choice for simple navigation because:

• it depends on JavaScript
• it loses normal link behavior
• it is less semantic
• it can be less accessible if used incorrectly

So the core rule is simple:

• Use <a> for going somewhere
• Use <button> for doing something

Think of HTML elements like labeled tools in a toolbox.

• A link is like a road sign: it points to another place.
• A button is like a doorbell: it triggers an action right here.

If your user is traveling to another page, give them a road sign (<a>). If your user is triggering an action on the current page, give them a doorbell (<button>).

You can paint the road sign so it looks like a button, but it is still a road sign underneath. That is usually the best approach for navigation.

Core syntax for navigation

Use an anchor element with an href:

<a href="/products">View Products</a>

• href tells the browser where to go.
• This is the standard and accessible way to navigate.

Make a link look like a button

<a href="/products" class="button-link">View Products</a>

.button-link {
  display: inline-block;
  padding: 10px 16px;
  background-color: #2563eb;
  color: white;
  text-decoration: none;
  border-radius: 6px;
}

.button-link:hover {
  background-color: #1d4ed8;
}

 {
  :  solid ;
  : ;
}

Consider this example:

<a href="/dashboard" class="button-link">Open Dashboard</a>

Here is what happens step by step:

1. The browser reads the <a> element.
2. It sees the href value /dashboard.
3. It understands that this element is a link.
4. The user clicks it, or focuses it with the keyboard and presses Enter.
5. The browser navigates to /dashboard.
6. If CSS styles are applied, it may look like a button while still behaving like a link.

Now compare that with this:

<button type="button" onclick="window.location.href='/dashboard'">
  Open Dashboard
</button>

Step by step:

1. The browser reads a <button> element.
2. It understands this element as an action control, not a navigation link.
3. The user clicks the button.

This pattern appears in many real applications.

Navigation in websites

<a href="/signup" class="button-link">Create Account</a>

A call-to-action may look like a button, but it is still navigation.

Product pages

<a href="/checkout" class="button-link">Go to Checkout</a>

If the user is being sent to another page, a link is appropriate.

Dashboard shortcuts

<a href="/reports" class="button-link">View Reports</a>

Marketing pages

<a href="/demo" class="button-link">Book a Demo

In real codebases, developers usually follow a simple pattern:

Pattern: semantic HTML first

Use a link for navigation and style it with CSS:

<a href="/login" class="btn btn-primary">Log in</a>

This is common in design systems and component libraries.

Pattern: reusable button-link classes

Teams often create shared CSS classes such as:

.btn {
  display: inline-block;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  text-decoration: none;
}

.btn-primary {
  background: #0d6efd;
  color: white;
}

Then they apply those classes to anchors for navigation.

Pattern: guard against unnecessary JavaScript

If no custom logic is needed, developers avoid this:

<button onclick="location.href='/profile'">Profile

1. Using a button for normal page navigation

Broken pattern:

<button type="button" onclick="window.location='/about'">About</button>

Why it is a problem:

• relies on JavaScript
• loses native link features
• is semantically less accurate

Better:

<a href="/about" class="button-link">About</a>

2. Putting a link inside a button

Broken code:

<button><a href="/about">About</a></button>

Why it is a problem:

• interactive elements should not be nested this way
• browser behavior can become inconsistent
• accessibility suffers

Use one or the other, not both.

<a> vs <button>

• Use <a> when the destination matters.
• Use <button> when the action matters.

Relative URL vs absolute URL

Quick rule

• Navigates somewhere? Use <a>
• Performs an action? Use <button>

Best pattern

<a href="/page" class="button-link">Go to Page</a>

Basic CSS

.button-link {
  display: inline-block;
  padding: 10px 16px;
  background: blue;
  color: white;
  text-decoration: none;
  border-radius: 4px;
}

Avoid

<button><a href="/page">Go</a></button>

Go

Should I use <button> or <a> to go to another page?

Use <a> for going to another page. That is what links are for.

Can I make a link look like a button?

Yes. This is the most common and recommended solution. Use an <a> element and style it with CSS.

Is onclick with window.location bad?

It is not always wrong, but it is usually unnecessary for simple navigation. A normal link is more semantic and accessible.

Why is accessibility better with a link?

Screen readers, browsers, and keyboard users expect navigation to be a link. Links also support standard browser features like opening in a new tab.

Can I nest a link inside a button?

No. Do not nest interactive elements inside each other.

How do I keep the URL clean?

Use a direct href such as /about or contact.html. Avoid fake links or unnecessary JavaScript-based redirects when plain HTML works.

Can a button ever be used for navigation?

Yes, but usually only when JavaScript controls a more complex flow. For standard page navigation, a link is the better choice.

• Anchor element (<a>): The HTML element used for navigation.
• Button element (<button>): Used for actions such as submitting forms or triggering scripts.
• Semantic HTML: Helps you choose the correct element based on meaning and behavior.
• Accessibility: Important for screen readers, keyboard users, and correct interactive behavior.
• CSS styling: Lets you make a link visually appear like a button.
• Relative and absolute URLs: Useful for choosing the cleanest way to link to pages.
• JavaScript event handling: Relevant when buttons trigger scripted behavior instead of normal navigation.