W3Docs

Appearance

  1. Snippets
  2. HTML
  3. How to Add an HTML Button that Acts Like a Link

How to Add an HTML Button that Acts Like a Link ​

For the best accessibility and semantic HTML, styling an <a> tag as a button is generally recommended. However, if you specifically need a <button> element, here are several methods to make it act 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.

Add an inline onclick event ​

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

DANGER

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

Note: Inline event handlers like onclick are generally discouraged in modern development. For production code, consider attaching event listeners via JavaScript or using a proper <a> tag.

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

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

html
<!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: ​

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

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

DANGER

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.

Note: Using <form action="..."> triggers a GET request, which appends query parameters to the URL. If you want to navigate without changing the URL, this method is not suitable.

Example of creating a button acting like a link with the action attribute:

html
<!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".

Example of opening a link from a button in a new window:

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

DANGER

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

Example of creating a button acting like a link with the formaction attribute:

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

DANGER

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.

Example of styling a link as a button with CSS:

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

DANGER

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

Let's see one more example.

Example of styling a link as a button and adding a hover effect:

html
<!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;
        transition: 0.3s;
      }
      .button:hover {
        background-color: #c2c7c7;
      }
    </style>
  </head>
  <body>
    <a class="button" href="https://www.w3docs.com/learn-html/html-button-tag.html">HTML button tag</a>
  </body>
</html>

How about the accessibility? ​

Let's take accessibility into our account for the last example. Here are some improvements to make the code more accessible:

  1. Add a meaningful alt attribute to the image:

If the button contained an image, it would be important to provide an alt attribute to make the image accessible to screen readers. Since this button doesn't have an image, we don't need to worry about this.

  1. Add an accessible name:

The aria-label attribute on the <a> element already provides a clear description for screen readers, so no additional wrapper is needed.

  1. Increase contrast:

To improve visibility for users with low vision, we can increase the contrast between the text color and background color of the button. We can achieve this by making the background color darker or the text color lighter.

  1. Add focus styles:

Adding a focus style to the button will help users who navigate using the keyboard to see which element is currently focused. We can add a simple border to the button to achieve this.

Here's the updated code with these improvements:

Example of styling a link as a button and adding a hover effect with accessibility:

html
<!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: #3c5d6e;
        border-radius: 6px;
        outline: none;
        transition: 0.3s;
        border: 2px solid transparent;
      }
      .button:hover,
      .button:focus {
        background-color: #c2c7c7;
        border-color: #7aa8b7;
      }
    </style>
  </head>
  <body>
    <a class="button" href="https://www.w3docs.com/learn-html/html-button-tag.html" aria-label="Learn about the HTML button tag"><span>HTML button tag</span></a>
  </body>
</html>

Dual-run preview — compare with live Symfony routes.