Explain

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.

Recommended Courses

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.