Can HTML Buttons Have href?[Answered]

HTML buttons cannot have href attribute if they are created using button <button> </button> HTML tags. However, you can use href attribute if you create the buttons using link <a> </a> HTML tags.

How to Add href to HTML Buttons

There are two methods you can use to add href to a button in HTML.

1. Add href to Button Using Link Styled as a Button

HTML buttons don’t have a href attribute by default like links. But you can create an HTML link with the href attribute. Then you can design it to appear like a button.

First, you create a normal-looking link in HTML.

<a href=”https://devpractical.com/blog” class=”button-link”>
  Devpractical’s blog page
</a>

Then, style the link to look like a button using CSS.

.button-link {
  padding: 10px 20px;
  background-color: #a61e4d;
  color: #eee;
}

2. Add href to Button Using Javascript

You can add the href attribute to any HTML button using Javascript.

<button onclick=”location.href=’http://devpractical.com’” type=”button”>
  Devpractical’s Home Page
</button>

You can separate the HTML and Javascript. The result will be:

<button id=”devpractical-home” type=”button”>
  Devpractical’s Home Page
</button>
<script>
    Document.getElementById(“devpractical-home”).addEventListener(“click”, function(){
      location.href=’http://devpractical.com’;
    });
</script>

Conclusion

Using an HTML link styled like a button is the most recommended method to use. It works on all devices like screen readers and does not require Javascript to be enabled.