How to Create an HTML Button That Acts Like a Link?

Check out various ways to create an HTML button that behaves like a link

If you're looking to create an HTML button that acts like a link (i.e. clicking on it takes you to a custom specified link), here are some of the options that are available in HTML/CSS:

Using the Inline onclick Event

We can simply use onclick event on an HTML button element. For example: 

<button onclick="window.location.href = 'link.html';">Link</button>

<input type="button" onclick="window.location.href = 'link.html';" value="Link" />

Some of the downsides of using this approach might be:

  • Won't work when JavaScript is disabled.
  • To open a link in a new tab/window requires extra bit of coding.
  • Browser won't interpret it as a standard link, making it difficult to copy it to clipboard for sharing.
  • Some search bots might ignore the link, making it bad for SEO.

Using HTML Form Submit Button

Using Form Element's action Attribute:

An HTML button wrapped inside a form element with the action attribute specified works as well: 

<form action="link.html" method="get" target="_blank">
    <button type="submit">Link</button>
</form>

Some of the downsides of using this approach might be:

  • Although it validates as valid markup, it may not always be semantically correct because we're not submitting form data (which is what it's telling the browser it's meant to do code-wise) but instead it's being used as a link.
  • Submitting with GET will leave a trailing ? at the end of the resulting URL.
  • Requires an extra form element.

Using HTML5 formaction Attribute:

Using the new HTML5 formaction attribute on the button element: 

<form>
    <button type="submit" formaction="link.html">Link</button>
</form>

The downsides of using this approach are the same as above with an addition that it's HTML5-specific so support for old browsers might be poor.

Using a Link Styled as an HTML Button

We can mimic the appearance of the browser's default styling of an HTML button on an HTML link element:

HTML:

<a href="link.html" class="button">Link</a>

CSS:

a.button {
    display: inline-block;
    box-sizing: border-box;
    margin: 0;
    padding: 1px 6px;

    font: 13.3333px Arial;
    text-rendering: auto;
    text-align: center;
    text-transform: none;
    text-decoration: none;
    text-indent: 0;
    text-shadow: none;
    letter-spacing: normal;
    word-spacing: normal;
    color: buttontext;

    border: 2px outset buttonface;
    border-image: initial;

    background-color: buttonface;

    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    cursor: default;
}

a.button:active { border-style: inset; }

Some of the downsides of using this approach might be:

  • Browser support for the CSS appearance property might be limited.
  • Requires complex styling to get default button styling (which may work only on certain browsers).
  • Poor accessibility — does not trigger a click event when space bar is pressed on an active link.

Overlaying an Invincible Link on an HTML Button Element

An empty link can overlay an HTML button to keep the default appearance whilst allowing to treat it as a link:

HTML:

<div class="lnkButton">
    <a href="link.html"></a>
    <button>Link</button>
</div>

CSS:

.lnkButton {
    display: inline-block;
    position: relative;
}

.lnkButton > a {
    margin: auto; 
    
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    z-index: 2; 
    
    cursor: default;
}

.lnkButton > a:active + button {
    border-style: inset;
}

.lnkButton > button {
    position: relative; 
    z-index: 1;
}

Some of the downsides of using this approach might be:

  • Uses an empty anchor tag.
  • Requires an extra parent container element.
  • Button active (and other) state styling might have to be done manually and may not resemble default active button styling 100%.
  • Poor accessibility — does not trigger a click event when space bar is pressed on an active link.

Hope you found this post useful. It was published (and was last revised ). Please show your love and support by sharing this post.