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

To create an HTML button that acts like a link (i.e., navigates to a URL when clicked), you have a few options. Below are the most common and recommended approaches:

1. Use an <a> Tag Styled as a Button (Recommended)

The simplest and most semantic way is to style a hyperlink (<a>) to look like a button. This retains all link functionality (right-click options, opening in new tabs, etc.) without JavaScript.
Example:

<a href="https://example.com" class="button">Click Me</a>

CSS:

.button {
  display: inline-block;
  padding: 10px 20px;
  background: #007bff;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  border: none;
  cursor: pointer;
}

.button:hover {
  background: #0056b3;
}

2. Use a <form> with GET Action

Submit a form to navigate to a URL (works without JavaScript):

<form action="https://example.com" method="GET">
  <button type="submit">Visit Example</button>
</form>

Note: This adds the URL to the browser history and supports opening in new tabs via Ctrl + Click/Cmd + Click.

3. Use JavaScript (Less Recommended)

Add an onclick event to the button (requires JavaScript):

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

For new tabs:

<button onclick="window.open('https://example.com', '_blank')">Open in New Tab</button>

4. Use <a> Wrapping a <button> (Not Recommended)

Avoid this method due to invalid HTML semantics and accessibility issues:

<a href="https://example.com">
  <button>Click Me</button>
</a>

Key Considerations

• Accessibility: Use semantic HTML (e.g., <a> for links, <button> for actions).
• Functionality:
• Right-click options: Only <a> tags allow “Open in new tab” via right-click.
• URL parameters: The <form> method appends parameters to the URL (e.g., ?param=value).
• Styling: Use CSS to make links look like buttons (padding, background-color, border-radius).

Best Practice

Use the <a> tag styled as a button for:
✅ Full link functionality (new tabs, bookmarks).
✅ Accessibility (screen readers recognize it as a link).
✅ No JavaScript dependency.

Use <form> or JavaScript methods only for edge cases (e.g., dynamic URL generation).