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

html

responsive-design

best-practices

accessibility

byAnton Shumikhin·Feb 12, 2025

Turn an anchor (<a>) into a button-style link with a sprinkle of CSS:

<a href="https://www.example.com" class="button-style">Button Link</a>

Give your link a buttonesque look using CSS that says "yeah, I am definitely a button":

.button-style {
  display: inline-block;
  padding: 10px 15px;
  background: #f2f2f2;
  border: 1px solid #000; /* Until true dark mode is universal, this border is rockin' the black */
  color: #333;
  text-decoration: none;
  text-align: center;
}

.button-style:hover, .button-style:focus {
  background: #e2e2f2; /* Hover effect because why not? */
}

This moves us past just "link in disguise" to a real-world button with style.

The Button Link Book of Secrets

Button-Styled Forms

For serious form submission stuff, use a form with a button that "submits" by navigating to a URL like a boss:

<form action="https://www.example.com" method="get">
   <button type="submit">Home Page Go-go!</button>
</form>

CSS Bootstrap Hijinks

For times when you'd rather leverage Bootstrap's powers, use the btn btn-primary CSS classes:

<a href="https://www.example.com" class="btn btn-primary">I'm a Bootstrap Officer</a>

Make sure you're on the same Bootstrap version. For better customization, refer Bootstrap documentation, it's like a love letter to CSS.

JavaScript: The Button Link Jedi

Build yourself a redirection button to a specified URL using JavaScript. No cape needed:

<button onclick="window.location.href='https://www.example.com';">Get to the Choppa!</button>

Stay vigilant for dodgy operations if the button is within a form.

More Than Meets the Eye

CSS-style Button Look

CSS turns a simple link into a glamorous clickable component:

a.as-button {
  display: inline-block;
  text-align: center;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 4px;
  background-color: #007bff; /* Blueprint of beauty */
  color: #ffffff;
  border: 1px solid transparent;
}

a.as-button:hover {
  background-color: #0056b3; /* Hover effect, so lit */
}