How to make a button a link

It’s undesirable to style a link as a standard button: link inherently leads to a resource while pressing a button usually initiates an action. But if we have the task anyway, it makes sense at least to solve it properly.

The right way

A valid and crossbrowser solution is to put button into a simple form. The action attribute of the form should contain the URL which the “link button” should point to. For the form to work in old browsers (IE8 and older), the type="submit" attribute should be added to the button:

<form action="/example/">
    <button type="submit">Link button</button>
</form>

The “Link button” in the example leads to a page available at the /example/ URL.

If it’s needed to open the link in a new window or in a frame, the target attribute of the FORM element can be used, just like with regular links.

<form action="/example/" target="_blank">

Demo

Scaling Full HD to 4K with no blur

Query string

Query string is a part of URL located after first question mark and consisting of GET parameters as name=value pairs separated with the & character.

If URL which link should point to contains a query string, then a hidden form field with corresponding name and value attributes should be added for each of GET parameters:

<form action="/example/">
    <input type="hidden" name="foo"   value="bar" />
    <input type="hidden" name="lorem" value="ipsum" />
    <button type="submit">Link button</button>
</form>

This form leads to /example/?foo=bar&lorem=ipsum page.

Chromium/Blink and WebKit

Browsers based on Chromium/Blink (Chrome, Opera 15+, Vivaldi) and WebKit (Safari) engines have a bug (1, 2): the question mark (separator between main URL part and query string) is added to the URL even if there are no fields in the form. So, for example, the following form:

<form action="/example/">
    <button type="submit">Link button</button>
</form>

will lead to the /example/? URL instead of the expected /example/.

Kent Tamura from the Chromium development team says that this matches the current HTML and URL specifications.

A workaround for this issue is an automatic redirection from URL with a trailing question mark to the same URL with the question mark removed.

Limitations compared with a true link

• The user cannot know the URL the link button points to, before clicking it.
• The user cannot open the link button in a new tab or a new window.

Wrong ways

Button wrapped in a link

A straightforward solution used quite often is just to wrap BUTTON element in a link:

<a href="/example/"><button>Link button</button></a>

This works in all modern browsers, but this is invalid according to HTML5: a link must not contain interactive content. Also, such link doesn’t work in Internet Explorer (IE) older than version 9.

Demo

Extension for preventing blurring images on webpages

Button with a JS click handler

Sometimes a button is used in conjunction with a JavaScript handler of click event:

<button onclick="location.href = '/example/'">Link button</button>

But such button doesn’t work with JavaScript disabled, it cannot be opened in a new tab or a new window, and there may be issues with search engines that do not execute JavaScript code.

Demo

App for scaling games with no blur

Nonstandard CSS extensions

The features described below are nonstandard and not recommended for use.

Firefox and Chromium

Firefox 81 and older versions and previous versions browsers based on Chromium engine (Chrome, Opera 15+, Vivaldi) supported nonstandard proprietary prefixed versions of the appearance property the button value of which allowed to apply button styling to an arbitrary element, including links:

A.example {
       -moz-appearance: button; /* Firefox */
    -webkit-appearance: button; /* Chromium */
}

Demo

Melodic instrumental music

Internet Explorer, Edge, and specification

The feature is unavailable in Microsoft’s browsers Internet Explorer (IE) and Edge. The CSS Basic User Interface Module Level 4 specification does not define the button value for the appearance property.