How to create a button that acts like a link in HTML5?

The window.location method of JavaScript can be used to realize button jump through the onclick event, but lacks the accessibility and right-click function of native links; 2. Beautifying the <a> tag into the button appearance in CSS style is the best practice, retaining the complete link behavior, supporting quick operations and clear semantics; 3. Using form buttons with formation attributes can be used to realize jump, but relying on the form submission mechanism, it is not easy to support the opening of new tabs; 4. If JavaScript buttons must be used, role="link" and keyboard events should be added to improve accessibility, but the code is more complicated; it is recommended to give priority to the use of styled <a> tags, because their semantics are correct, easy to implement and compatible with all link functions, and other solutions will be considered when you really need button semantics.

You can create a button that acts like a link in HTML5 in a few different ways, depending on your needs—whether it's for navigation, accessibility, or styling. Here are the most common and effective approaches:

1. Using JavaScript with window.location

This is the simplest way: attach an onclick event to a <button></button> that changes the page location.

 <button onclick="window.location.href=&#39;https://example.com&#39;">
  Go to Example
</button>

Pros:

• Looks and behaves like a button
• Fully customized with CSS
• No form needed

Cons:

• Not inherently accessible (screen readers may not treat it as a link)
• Doesn't open in a new tab with Ctrl click or right-click → "Open in new tab"

2. Styling an <a> Tag to Look Like a Button

Instead of making a button act like a link, make a link look like a button. This is often the better semantic choice.

 <a href="https://example.com" class="button-link">Go to Example</a>

With CSS:

 .button-link {
  display: inline-block;
  padding: 10px 15px;
  background-color: #007bff;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  border: 1px solid #0056b3;
  font-family: sans-serif;
}

.button-link:hover {
  background-color: #0056b3;
}

Pros:

• Full link behavior (Ctrl click, right-click, etc.)
• Accessible and semantic
• Easy to style

Cons:

• Requires CSS to look like a button

This method is often recommended by accessibility experts because it preserves native link functionality.

3. Using a Button Inside a Form with formaction

If you're OK with a slight redirect behavior, you can use a button inside a dummy form:

 <form action="https://example.com">
  <button type="submit">Go to Example</button>
</form>

Or with formaction for more control:

 <form>
  <button type="submit" format="https://example.com">Go to Example</button>
</form>

Pros:

• Uses native HTML form submission
• Works without JavaScript

Cons:

• Triggers a full page load (like a link) but through form submission
• May not support all link interactions (like opening in new tabs easy)

4. Enhancing Accessibility with ARIA (if using JavaScript method)

If you go with the JavaScript button approach and want to improve accessibility:

 <button onclick="window.location.href=&#39;https://example.com&#39;"
        role="link"
        tabindex="0">
  Go to Example
</button>

You can also add key event support for Enter/Space:

 <button 
  onclick="window.location.href=&#39;https://example.com&#39;"
  onkeydown="if(event.key===&#39;Enter&#39;) window.location.href=&#39;https://example.com&#39;"
  role="link"
  tabindex="0">
  Go to Example
</button>

But this gets messy—again, just using <a> with button styles is cleaner.

Recommendation

Best practice: Use a styled <a> tag (Method 2).
It's semantic, accessible, supports all native link behaviors, and is easy to style.

Only use a JavaScript-driven button if you're in a context where you absolutely need button semantics (eg, inside a complex form where you don't want submission) and are OK sacrificing some accessibility or link features.

Basically, if you want a link, use a link. Just make it look like a button.

The above is the detailed content of How to create a button that acts like a link in HTML5?. For more information, please follow other related articles on the PHP Chinese website!