Logo
Back

How do I create an HTML button that acts like a link?

You have a few options for creating an HTML button that navigates to another page, effectively acting like a link. Below are some of the most common methods:

1. Use a <button> with an onclick to Change window.location

A simple way is to set the onclick handler so that clicking the button updates the current location:

<button type="button" onclick="window.location.href='https://example.com';">
  Go to Example.com
</button>
  • Pros: Straightforward and requires only a small JavaScript snippet.
  • Cons: If JavaScript is disabled, the button won’t work as a link.

2. Use a <button> Inside a Form (GET Request)

If you want to submit a form-like request and navigate via GET:

<form action="https://example.com" method="get">
  <button type="submit">
    Go to Example.com
  </button>
</form>
  • Behavior: Acts as a link by sending a GET request to https://example.com.
  • Trade-off: This triggers a full page reload and is less flexible if you just need pure navigation without form submission.

3. Style an Anchor (<a>) to Look Like a Button

Often considered the best practice for accessibility if all you need is navigation. You can turn an <a> tag into a visually styled button:

<a href="https://example.com" class="btn">
  Go to Example.com
</a>
.btn {
  display: inline-block;
  padding: 0.5em 1em;
  background-color: #3498db;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
}
.btn:hover {
  background-color: #2980b9;
}
  • Pros: Uses correct semantic markup for navigation. Users without JavaScript can still navigate, and screen readers will treat it as a link.
  • Cons: Requires CSS for the button look.

Best Practice Tip

  • If the element’s sole purpose is navigation, prefer using a link (<a href="..." >) styled to look like a button.
  • If it’s a form action or triggers an in-page action, a button (<button>) is semantically appropriate.

Level Up Your Web Development Skills

To deepen your knowledge of HTML, CSS, and JavaScript fundamentals, check out these courses on DesignGurus.io:

These courses combine conceptual explanations with real-world practice, helping you build dynamic web applications with semantic, accessible elements. Additionally, visit the DesignGurus.io YouTube channel for free tutorials and discussions on software engineering, system design, and more.

CONTRIBUTOR
TechGrind