How to create an HTML button that acts like a link?
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>
Accepted Answer
HTML
The plain HTML way is to put it in a <form>
wherein you specify the desired target URL in the action
attribute.
<form action="https://google.com">
<input type="submit" value="Go to Google" />
</form>
If necessary, set CSS display: inline;
on the form to keep it in the flow with the surrounding text. Instead of <input type="submit">
in above example, you can also use <button type="submit">
. The only difference is that the <button>
element allows children.
You'd intuitively expect to be able to use <button href="https://google.com">
analogous with the <a>
element, but unfortunately no, this attribute does not exist according to HTML specification.
CSS
If CSS is allowed, simply use an <a>
which you style to look like a button using among others the appearance
property (it's only not supported in Internet Explorer).
<a href="https://google.com" class="button">Go to Google</a>
a.button {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
text-decoration: none;
color: initial;
}
Or pick one of those many CSS libraries like Bootstrap.
<a href="https://google.com" class="btn btn-primary">Go to Google</a>
JavaScript
If JavaScript is allowed, set the window.location.href
.
<input type="button" onclick="location.href='https://google.com';" value="Go to Google" />
Instead of <input type="button">
in above example, you can also use <button>
. The only difference is that the <button>
element allows children.
Read more... Read less...
<button onclick="location.href='http://www.example.com'" type="button">
www.example.com</button>
Note that the type="button"
attribute is important, since its missing value default is the Submit Button state.
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:
Use:
<a href="http://www.stackoverflow.com/">
<button>Click me</button>
</a>
Unfortunately, this markup is no longer valid in HTML5 and will neither validate nor always work as potentially expected. Use another approach.
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
It is actualy very simple and without using any form elements. You can just use the <a> tag with a button inside :).
Like this:
<a href="http://www.google.com" target="_parent"><button>Click me !</button></a>
And it will load the href into the same page. Want a new page? Just use target="_blank"
.
EDIT
Couple of years later, while my solution still works, keep in mind you can use a lot of CSS to make it look whatever you want. This was just a fast way.