How to create an HTML button that acts like a link

Question

I would like to create an HTML button that acts like 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 like 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

For HTML 5 and styled button along with image background

<a id="Navigate" href="http://www.google.com">
  <input 
    type="button"
    id="NavigateButton"
    style="
      background-image: url(http://cdn3.blogsdna.com/wp-content/uploads/2010/03/Windows-Phone-7-Series-Icons-Pack.png);
      background-repeat: no-repeat;
      background-position: -272px -112px;
      cursor:pointer;
      height: 40px;
      width: 40px;
      border-radius: 26px;
      border-style: solid;
      border-color:#000;
      border-width: 3px;" title="Navigate"
    />
</a>

Answer 2

    <input type = "submit" name = "submit" onClick= "window.location= 'http://example.com'">

I used this for a website I'm currently working on and it works great!. If you want some cool styling too I'll put the CSS down here.

input[type = "submit"] {
    background-color:white;
    width:200px;
    border: 3px solid #c9c9c9;
    font-size:24pt;
    margin:5px;
    color:#969696;
}
input[type = "submit"]:hover {
    color: white;
    background-color:#969696;
    transition: color 0.2s 0.05s ease;
    transition: background-color 0.2s 0.05s ease;
    cursor: pointer;
}

Working JSFiddle here

Answer 3

The only way to do this (except for BalusC's ingenious form idea!) is by adding a JavaScript onclick event to the button, which is not good for accessibility.

Have you considered styling a normal link like a button? You can't achieve OS specific buttons that way, but it's still the best way IMO.

Answer 4

Regarding BalusC's reply,

<form action="http://google.com">
    <input type="submit" value="Go to Google">
</form>

I needed to add variables to the button and wasn't sure how. I ended up using input type hidden. I thought this might be helpful to others who found this page like myself.