How to make a link button

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.

Demo

Live demo of such link button:

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 /example/? URL instead of proper /example/.

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>

But such solution 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.

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, and there may be issues with search engines that do not execute JavaScript code.

Nonstandard CSS extensions

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

Firefox and Chromium

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

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

Demo

Live demo of such link button:

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.