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;
}

.button-link:focus {
  outline: 2px solid #000;
  outline-offset: 2px;
}

This gives you:

• correct navigation semantics
• keyboard accessibility
• a visual button appearance

JavaScript-based button navigation

<button type="button" onclick="window.location.href='/products'">
  View Products
</button>

This can work, but use it only when you truly need a button plus JavaScript behavior.

Link styled as a button with full URL

<a href="https://example.com/pricing" class="button-link">Pricing</a>

Link using a relative URL

<a href="pricing.html" class="button-link">Pricing</a>

Relative URLs help keep links short and avoid unnecessary extra characters.

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.
4. JavaScript runs the onclick code.
5. window.location.href is changed to /dashboard.
6. The browser then navigates to the new page.

Both examples can move the user to another page, but the first one is usually better because navigation is what links are designed for.

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</a>

Documentation sites

<a href="/docs/getting-started" class="button-link">Get Started</a>

In all of these cases, the element may look like a button for design reasons, but semantically it remains a link.

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</button>

Because it adds JavaScript where plain HTML is enough.

Pattern: frameworks and routing

In frameworks, the same idea still applies. For example, developers often use routing link components that render as links under the hood.

Examples include:

• navigation menus
• call-to-action buttons
• card links
• pagination controls

Pattern: accessibility reviews

Good code reviews often ask:

• Does this navigate? Use a link.
• Does this perform an action? Use a button.

That simple rule prevents many accessibility and usability problems.

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.

3. Putting a button inside a link

Broken code:

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

This is also an incorrect pattern for the same reason.

4. Using href="#" just to fake a button

Broken code:

<a href="#" onclick="goSomewhere()">Go</a>

Why it is a problem:

• # changes the URL fragment or scroll position
• it is misleading if the element is not really a normal link

If it performs an action, use a button. If it navigates, use a real href value.

5. Forgetting keyboard focus styles

If you style a link as a button, make sure keyboard users can still see focus.

.button-link:focus {
  outline: 2px solid black;
  outline-offset: 2px;
}

6. Removing underline without clear button styling

If you remove link styling, make sure the result still clearly looks interactive.

Bad:

a {
  text-decoration: none;
  color: inherit;
}

This can make links hard to recognize.

Always provide a clear visual style.

<a> vs <button>

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

Relative URL vs absolute URL

If you want minimal extra characters in the URL, relative URLs are often the cleanest option for internal navigation.

HTML-only vs JavaScript navigation

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>

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

<button onclick="location.href='/page'">Go</button>

Use the last one only if you truly need JavaScript-based behavior.

Accessibility tips

• Keep real navigation as links
• Make focus visible
• Use meaningful link text
• Do not rely on href="#" for navigation

URL tips

• Use relative paths for internal pages: href="/about"
• Use absolute URLs for external pages: href="https://example.com"

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.