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

Are there any downsides to doing something like the following?

<a class='nostyle' href='http://www.google.com/'>
    <span class='button'>Schedule</span>
</a>

Where a.nostyle is a class that has your link styling (where you can get rid of the standard link styling) and span.button is a class that has the styling for your "button" (background, border, gradient, etc.).

Answer 2

<button onclick="location.href='http://www.example.com'" type="button">
     www.example.com</button>

Answer 3

@Nicolas,following worked for me as yours didn't have type="button" due to which it started behaving as submit type..since i already have one submit type.it didn't worked for me ....and now you can either add class to button or to <a> to get required layout:

<a href="http://www.google.com/">
    <button type="button">Click here</button>
</a>

Answer 4

If it's the visual appearance of a button you're looking for in a basic HTML anchor tag then you can use the Twitter Bootstrap framework to format any of the following common HTML type links/buttons to appear as a button. Please note the visual differences between version 2, 3 or 4 of the framework:

<a class="btn" href="">Link</a>
<button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit">

Bootstrap (v4) sample appearance:

Bootstrap (v3) sample appearance:

Bootstrap (v2) sample appearance:

Answer 5

As of HTML5, buttons support the formaction attribute. Best of all, no Javascript or trickery is needed.

<form>
  <button formaction="http://stackoverflow.com">Go to Stack Overflow!</button>
</form>

Caveats

• Must be surrounded by <form> tags.
• <button> type must be "submit" (or unspecified), I couldn't get it working with type "button." Which brings up point below.
• Overrides the default action in a form. In other words, if you do this inside another form it's going to cause a conflict.

Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formaction Browser Support: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Browser_compatibility

Answer 6

If you want to redirect for pages which reside within your website, then then here's my method - I've added the attribute href to the button, and onclick assigned this.getAttribute('href') to document.location.href

** It won't work if you reference for urls outsite of your domain because of 'X-Frame-Options' to 'sameorigin'.

Sample code:

<button onclick="document.location.href=this.getAttribute('href');" href="/">Home</button>