How to create an HTML button that acts like a link?

Question

I would like to create an HTML button that acts as a link. So, when you click the button, it redirects to a page. I would like it to be as accessible as possible.

I would also like it so there aren't any extra characters or parameters in the URL.

How can I achieve this?

Based on the answers posted so far, I am currently doing this:

<form method="get" action="/page2">

    <button type="submit">Continue</button>

</form>

but the problem with this is that in Safari and Internet Explorer, it adds a question mark character to the end of the URL. I need to find a solution that doesn't add any characters to the end of the URL.

There are two other solutions to do this: Using JavaScript or styling a link to look like a button.

Using JavaScript:

<button onclick="window.location.href='/page2'">Continue</button>

But this obviously requires JavaScript, and for that reason, it is less accessible to screen readers. The point of a link is to go to another page. So trying to make a button act as a link is the wrong solution. My suggestion is that you should use a link and style it to look like a button.

<a href="/link/to/page2">Continue</a>

Answer 1

In HTML

The simple HTML way is to put it in a <form> where you can specify the desired target URL in the action attribute like this:

<form action="http://google.com">

    <input type="submit" value="Go to Google" />

</form>

If needed, set CSS display: inline; on the form to keep it in the flow with the surrounding text. Instead of <input type="submit"> in the above example, you can also try using <button type="submit">. The only difference is that the <button> element allows children.

You will intuitively expect to be able to use <button href="http://google.com"> analogous with the <a> element, but this will not exist according to HTML specification.

In CSS

If CSS is allowed, you can just use a <a> which can be styled to look like a button using among others the appearance property. <a href="http://google.com" class="button">Go to Google</a>

a.button {

    -webkit-appearance: button;

    -moz-appearance: button;

    appearance: button;

    text-decoration: none;

    color: initial;

}

Otherwise,  you can just pick one of those many CSS libraries like Bootstrap.

<a href="http://google.com" class="btn btn-default">Go to Google</a>

In JavaScript

You can set the window.location.href, only if the JavaScript is allowed, 

<input type="button" onclick="location.href='http://google.com';" value="Go to Google" />