X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

How to Create an HTML Button that Acts Like a Link

There are several ways to create 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 an HTML button.

1. Add inline onclick event

  1. to HTML <button> tag within HTML <form> element.

Example

<!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 might not work if the button is inside a <form> tag.

  1. to <input> tag within HTML <form> element.

Example

<!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 such kind of links.

2. Use action or formaction attributes within <form> element

  1. action attribute

Example

<!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 attribute target="_blank".

Example

<!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>

As there is no form and no data is submitted, this may be semantically incorrect. However, this markup is valid.

  1. HTML5 formaction attribute.

Example

<!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 for buttons with type=”submit”. As this attribute is HTML5-specific, support in old browsers might be poor.

3. Add a link styled as an HTML button (using CSS)

Example

<!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>

As complex styling is required, this may not work on specific browsers.


Do you find this helpful?

Related articles