How to Add an HTML Button that Acts Like a Link

There are several ways of creating an HTML button, that acts like a link (i.e., clicking on it the user is redirected to the specified URL). You can choose one of the following methods to add a link to the HTML button.

Watch a course   CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Add an inline onclick event

You can add an inline onclick event to the <button> tag.

This might not work if the button is inside a <form> element.

Example of adding an onclick event to the <button> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <button onclick="window.location.href='https://w3docs.com';">
      Click Here
    </button>
  </body>
</html>

It is also possible to add an inline onclick event to the <input> tag within the <form> element.

Example of adding an onclick event to the <input> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form>
      <input type="button" onclick="window.location.href='https://www.w3docs.com';" value="w3docs" />
    </form>
  </body>
</html>
The links won’t work when JavaScript is disabled, and search engines may ignore this kind of links.

Use the action or formaction attribute.

Another way of creating a button that acts like a link is using the action or formaction attribute within the <form> element.

<!DOCTYPE html>
<html>
   <head>
      <title>Title of the document</title>
   </head>
   <body>
      <form action="https://www.w3docs.com/">
         <button type="submit">Click me</button>
      </form>
   </body>
</html>

To open the link in a new tab, add target="_blank".

<!DOCTYPE html>
<html>
   <head>
      <title>Title of the document</title>
   </head>
   <body>
      <form action="https://www.w3docs.com/" method="get" target="_blank">
         <button type="submit">Click me</button>
      </form>
   </body>
</html>
Since there is no form and no data is submitted, this may be semantically incorrect. However, this markup is valid.
<!DOCTYPE html>
<html>
   <head>
      <title>Title of the document</title>
   </head>
   <body>
      <form>
         <button type="submit" formaction="https://www.w3docs.com">Click me</button>
      </form>
   </body>
</html>
The formaction attribute is only used with buttons having type="submit". Since this attribute is HTML5-specific, its support in old browsers may be poor.

Add a link styled as a button with CSS properties. A href attribute is the required attribute of the <a> tag. It specifies a link on the web page or a place on the same page where the user navigates after clicking on the link. 

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .button {
        background-color: #1c87c9;
        border: none;
        color: white;
        padding: 20px 34px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 20px;
        margin: 4px 2px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <a href="https://www.w3docs.com/" class="button">Click Here</a>
  </body>
</html>
Since complex styling is required, this may not work on specific browsers.

Let's see one more example.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .button {
        display: inline-block;
        padding: 10px 20px;
        text-align: center;
        text-decoration: none;
        color: #ffffff;
        background-color: #7aa8b7;
        border-radius: 6px;
        outline: none;
      }
    </style>
  </head>
  <body>
    <a class="button" href="https://www.w3docs.com/learn-html/html-button-tag.html">HTML button tag</a>
  </body>
</html>