How do I create an HTML button that acts like a link? So that clicking the button redirects the user to a page.
I want it to be accessible, and with minimal extra characters or parameters in the URL.
37 Answers
Type window.location and press Enter in your browser console. Then you can get the clear idea what location contains:
hash: "" host: "stackoverflow.com" hostname: "stackoverflow.com" href: "https://stackoverflow.com/questions/2906582/how-to-create-an-html-button- that-acts-like-a-link" origin: "https://stackoverflow.com" pathname: "/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link" port: "" protocol: "https:" You can set any value from here.
So for redirecting another page, you can set the href value with your link.
window.location.href = your link In your case:
<button onclick="window.location.href='www.google.com'">Google</button> 
Comments
HTML Answer: If you want to create an HTML button that acts like a link, use the two common attributes for it: <a> and/or action="":
<form action="stackoverflow.com"/> <button type="submit" value="Submit Form" Or...
"href" is part of the <a> attribute. It helps direct links:
<a href="stackoverflow.com">Href</a>
Comments
If you are using an SSL certificate:
<a href="https://www.google.com" target="_blank"><button>Click me !</button></a> 
1 Comment
Peter Mortensen
Why is it different using an SSL certificate?
If you're using a CSS library or a theme, just apply the classes of a button to the anchor/link tag.
Below is an example with One UI:
<a class="btn-block-option" href=""> <i class="si si-reload"></i> </a> 
Comments
A simple solution to this answer is to programmatically create an a tag and click it in response to the button click.
Define a function you will call from your button's click handler.
<script> function simulateAnchorClick(href) { const a = document.createElement('a'); a.href = href; a.click(); } </script> In your HTML, call the function.
<button onclick="simulateAnchorClick('https://stackoverflow.com')">Click Me</button> This is a much better solution than:
- Trying to use CSS to style an
aelement like abutton. - Using a form to submit.
- Setting
document.location.href
Why? Because you do not have to worry about getting the style to match. You can control all of the link attributes, such as target, noreferer, etc.
Finally, although document.location.href changes the URL, it will not necessarily "act like a link" in regards to site policies. The provided snippet shows this distinction.
function simulateAnchorClick(href) { const a = document.createElement('a'); a.href = href; a.click(); }<button onclick="simulateAnchorClick('https://stackoverflow.com')"> Click Me </button>
5 Comments
Pelmered
No, this is not the right way. With the same styling applied, an anchor tag should look just like a button. You probably would want to style your buttons anyway. If you don't want to do that, a better solution would be wrap the button in a form tag with URL in the action. There is really no reason to require javascript for this.
Steven Spungin
"There is really no reason to require javascript for this". LOL. There are many reasons. If there are no real reasons, down vote the question, not the answer.
Pelmered
No, the question is perfectly valid. But this answer was not. If you use a javascript framework for your frontend you should probably use JS to handle navigation, but if you are not, you shouldn't use javascript for navigation unless you really need to for some reason. I can't think of many good reasons to do this.
Steven Spungin
Once again, @Pelered, you are completely missing the point. The question does not state LOOKS like a link, it states ACTS like a link. In my use case, JavaScript was the only solution because the system required the event to behave like a link, specifically a mailto link. To state it is "not the right way" or "shouldn't use JavaScript for navigation" is just plain ignorant. And to state a working solution is "wrong" just because you have some hangup using JavaScript is a concern unto itself.
Steven Spungin
This is really funny comment because the form approach did not work for me, and it even stated why in the answer, yet you are scolding the answer and stating it is wrong when it CLEARLY WORKS.
If what you need is that it will look like a button, with emphasis on the gradient image, you can do this:
<a href="www.yourlink.com" class="btn btn-gradient"><i class="fa fa-home"> Button Text</i></a> 
2 Comments
corn on the cob
You'll need some kind of https:// or http:// before the URL though. You can also link to local files using file:///
user229044
This assumes both Bootstrap and FontAwesome, neither of which are mentioned in the question.
If you want to create a button that acts as a link, there are multiple ways you can do this. Choose the one best for your situation. The code below creates a link inside a button.
<button> <a href="www.google.com">Go to Google</a> </button>The second way is to open a new window when the button is clicked
<button onclick="open('www.google.com')">Google</button>Or maybe add event listeners
document.querySelector("#btn").addEventListener('click', open('www.google.com'))<button id="btn">Go to Google</button>There are many ways you can do this, but this is only three small examples of buttons that act like a link. In other words, buttons that open up links.
1 Comment
Peter Mortensen
How is this different from previous answers (not a rhetorical question)?
?on the URL. This is caused by the form beingtype="GET", change this totype="POST"and the?at the end of the URL disappears. This is because GET sends all variables in the URL, hence the?.GETit will fail. I still think that using a link make sense with the caveat that it will not react to "spacebar" when active like button does. Also some style and behavior will be different (such as draggable). If you want the true "button-link" experience, having server side redirects for URL finishing by?to remove it might be also an option.