Can HTML Buttons Have href?[Answered]


HTML Link Button featured image 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.

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=”” class=”button-link”>
  Devpractical’s blog page

link screenshot

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

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

link styled like button screenshot


2. Add href to Button Using Javascript

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

<button onclick=”location.href=’’” type=”button”>
  Devpractical’s Home Page

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

<button id=”devpractical-home” type=”button”>
  Devpractical’s Home Page
    Document.getElementById(“devpractical-home”).addEventListener(“click”, function(){


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.

author's bio photo

Hi there! I am Avic Ndugu.

I have published 100+ blog posts on HTML, CSS, Javascript, React and other related topics. When I am not writing, I enjoy reading, hiking and listening to podcasts.