How to Create an HTML Button That Acts 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), you could do the following:

• Use Inline onclick Event;
• Use a Link Styled as an HTML Button;
• Overlay an Invisible Link on an HTML Button Element;
• Use HTML Form Submit Button.

Using Inline onclick Event

You can simply use onclick event on an HTML button element to redirect to another URL, for example, like so:

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

• It won't work when JavaScript is disabled;
• Opening 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 a Link Styled as an HTML Button

You can style the HTML anchor element as an HTML button. For example, to style an HTML anchor element similar to the browser's default styling of a button, you can do the following:

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 the default button styling (which may work only on certain browsers);
• Poor accessibility — does not trigger a click event when the SPACE keyboard key is pressed on link when it has focus.

Overlaying an Invisible Link on an HTML Button Element

You can overlay the HTML button with a link to keep the default appearance of the button, whilst using the functionality of a link:

HTML:

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

CSS:

.btn-link {
    display: inline-block;
    position: relative;
}

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

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

.btn-link > 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 the SPACE keyboard key is pressed on link when it has focus.

Using HTML Form Submit Button

You can use an HTML button wrapped inside a form element with the action attribute specified. This would redirect you to the URL specified by the action attribute when the form is submitted. For example:

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

As an alternative, you can also use the HTML5 formaction attribute on the button element:

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

Some of the downsides of using these approaches might be:

• Although it validates as valid markup, it may not always be semantically correct because the form data is not being submitted (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.