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>
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 OneUI
<a class="btn-block-option" href="">
<i class="si si-reload"></i>
</a>
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 redirect another page you can set href
value with your link.
window.location.href = your link
In Your Case-
<button onclick="window.location.href='www.google.com'">Google</button>
if you are using SSL Certificate
<a href="https://www.google.com" target="_blank"><button>Click me !</button></a>
<button onclick="location.href='http://www.example.com'" type="button">_x000D_
www.example.com</button>
_x000D_
Note that the type="button"
attribute is important, since its missing value default is the Submit Button state.
If you are using an inside form, add the attribute type="reset" along with the button element. It will prevent the form action.
<button type="reset" onclick="location.href='http://www.example.com'">
www.example.com
</button>
<form>
<input type="button" value="Home Page" onclick="window.location.href='http://www.wherever.com'">
</form>
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>
You could also set the buttons type-property
to "button" (it makes it not submit the form), and then nest it inside a link (makes it redirect the user).
This way you could have another button in the same form that does submit the form, in case that's needed. I also think this is preferable in most cases over setting the form method and action to be a link (unless it's a search-form I guess...)
Example:
<form method="POST" action="/SomePath">_x000D_
<input type="text" name="somefield" />_x000D_
<a href="www.target.com"><button type="button">Go to Target!</button></a>_x000D_
<button type="submit">submit form</button>_x000D_
</form>
_x000D_
This way the first button redirects the user, while the second submits the form.
Be careful to make sure the button doesn't trigger any action, as that will result in a conflict. Also as Arius pointed out, you should be aware that, for the above reason, this isn't strictly speaking considered valid HTML, according to the standard. It does however work as expected in Firefox and Chrome, but I haven't yet tested it for Internet Explorer.
For HTML 5 and styled button along with image background
<a id="Navigate" href="http://www.google.com">_x000D_
<input _x000D_
type="button"_x000D_
id="NavigateButton"_x000D_
style="_x000D_
background-image: url(http://cdn3.blogsdna.com/wp-content/uploads/2010/03/Windows-Phone-7-Series-Icons-Pack.png);_x000D_
background-repeat: no-repeat;_x000D_
background-position: -272px -112px;_x000D_
cursor:pointer;_x000D_
height: 40px;_x000D_
width: 40px;_x000D_
border-radius: 26px;_x000D_
border-style: solid;_x000D_
border-color:#000;_x000D_
border-width: 3px;" title="Navigate"_x000D_
/>_x000D_
</a>
_x000D_
People who have answered using <a></a>
attributes on a <button></button>
was helpful.
BUT then recently, I encountered a problem when I used a link inside a <form></form>
.
The button is now regarded like/as a submit button (HTML5). I've tried working a way around, and have found this method.
Create a CSS style button like the one below:
.btn-style{
border : solid 1px #0088cc;
border-radius : 6px;
moz-border-radius : 6px;
-webkit-box-shadow : 0px 0px 2px rgba(0,0,0,1.0);
-moz-box-shadow : 0px 0px 2px rgba(0,0,0,1.0);
box-shadow : 0px 0px 2px rgba(0,0,0,1.0);
font-size : 18px;
color : #696869;
padding : 1px 17px;
background : #eeeeee;
background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(49%,#eeeeee), color-stop(72%,#cccccc), color-stop(100%,#eeeeee));
background : -moz-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
background : -webkit-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
background : -o-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
background : -ms-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
background : linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
filter : progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 );
}
Or create a new one here : CSS Button Generator
And then create your link with a class tag named after the CSS style you have made:
<a href='link.php' class='btn-style'>Link</a>
Here's a fiddle:
As of HTML5, buttons support the formaction
attribute. Best of all, no Javascript or trickery is needed.
<form>_x000D_
<button formaction="http://stackoverflow.com">Go to Stack Overflow!</button>_x000D_
</form>
_x000D_
Caveats
<form>
tags.<button>
type must be "submit" (or unspecified), I couldn't get it working with type "button." Which brings up point below.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
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"] {_x000D_
background-color: white;_x000D_
width: 200px;_x000D_
border: 3px solid #c9c9c9;_x000D_
font-size: 24pt;_x000D_
margin: 5px;_x000D_
color: #969696;_x000D_
}_x000D_
_x000D_
input[type="submit"]:hover {_x000D_
color: white;_x000D_
background-color: #969696;_x000D_
transition: color 0.2s 0.05s ease;_x000D_
transition: background-color 0.2s 0.05s ease;_x000D_
cursor: pointer;_x000D_
}
_x000D_
<input type="submit" name="submit" onClick="window.location= 'http://example.com'">
_x000D_
Working JSFiddle here.
Another option is to create a link in the button:
<button type="button"><a href="yourlink.com">Link link</a></button>
Then use CSS to style the link and button, so that the link takes up the entire space within the button (so there's no miss-clicking by the user):
button, button a{position:relative;}
button a{top:0;left:0;bottom:0;right:0;}
I have created a demo here.
Also you can use a button:
For example, in ASP.NET Core syntax:
// Some other tags
<form method="post">
<input asp-for="YourModelPropertyOrYourMethodInputName"
value="@TheValue" type="hidden" />
<button type="submit" class="link-button" formaction="/TheDestinationController/TheDestinationActionMethod">
@(TextValue)
</button>
</form>
// Other tags...
<style>
.link-button {
background: none !important;
border: none;
padding: 0 !important;
color: #20a8d8;
cursor: pointer;
}
</style>
Why not just place your button inside of a reference tag e.g
<a href="https://www.google.com/"><button>Next</button></a>
This seems to work perfectly for me and does not add any %20 tags to the link, just how you want it. I have used a link to google to demonstrate.
You could of course wrap this in a form tag but it is not necessary.
When linking another local file just put it in the same folder and add the file name as the reference. Or specify the location of the file if in is not in the same folder.
<a href="myOtherFile"><button>Next</button></a>
This does not add any character onto the end of the URL either, however it does have the files project path as the url before ending with the name of the file. e.g
If my project structure was...
.. denotes a folder - denotes a file while four | denote a sub directory or file in parent folder
..public
|||| ..html
|||| |||| -main.html
|||| |||| -secondary.html
If I open main.html the URL would be,
http://localhost:0000/public/html/main.html?_ijt=i7ms4v9oa7blahblahblah
However, when I clicked the button inside main.html to change to secondary.html, the URL would be,
http://localhost:0000/public/html/secondary.html
No special characters included at the end of the URL. I hope this helps. By the way - (%20 denotes a space in a URL its encoded and inserted in the place of them.)
Note: The localhost:0000 will obviously not be 0000 you'll have your own port number there.
Furthermore the ?_ijt=xxxxxxxxxxxxxx at the end off the main.html URL, x is determined by your own connection so obviously will not be equal to mine.
It might seem like I'm stating some really basic points but I just want to explain as best as I can. Thank you for reading and I hope this help someone at the very least. Happy programming.
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.
@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>
Going along with what a few others have added, you can go wild with just using a simple CSS class with no PHP, no jQuery code, just simple HTML and CSS.
Create a CSS class and add it to your anchor. The code is below.
.button-link {
height:60px;
padding: 10px 15px;
background: #4479BA;
color: #FFF;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: solid 1px #20538D;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
}
.button-link:hover {
background: #356094;
border: solid 1px #2A4E77;
text-decoration: none;
}
<HTML>
<a class="button-link" href="http://www.go-some-where.com"
target="_blank">Press Here to Go</a>
That is it. It is very easy to do and lets you be as creative as you'd like. You control the colors, the size, the shapes(radius), etc. For more detailsm, see the site I found this on.
I know there have been a lot of answers submitted, but none of them seemed to really nail the problem. Here is my take at a solution:
<form method="get">
method that the OP is starting with. This works really well, but it sometimes appends a ?
to the URL. The ?
is the main problem.?
to the end of the URL though.?
doesn't end up appended to the URL. It will seamlessly fallback to the <form>
method for the very small fraction of users who don't have JavaScript enabled.<form>
or <button>
even exist. I'm using jQuery in this example, because it is quick and easy, but it can be done in 'vanilla' JavaScript as well.<form>
action
attribute.// Listen for any clicks on an element in the document with the `link` class
$(document).on('click', '.link', function(e) {
// Prevent the default action (e.g. submit the form)
e.preventDefault();
// Get the URL specified in the form
var url = e.target.parentElement.action;
window.location = url;
});
_x000D_
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charset="utf-8">
<title>Form buttons as links</title>
</head>
<body>
<!-- Set `action` to the URL you want the button to go to -->
<form method="get" action="http://stackoverflow.com/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link">
<!-- Add the class `link` to the button for the event listener -->
<button type="submit" class="link">Link</button>
</form>
</body>
</html>
_x000D_
Try
.abutton {
background: #bada55; padding: 5px; border-radius: 5px;
transition: 1s; text-decoration: none; color: black;
}
.abutton:hover { background: #2a2; }
_x000D_
<a href="https://example.com" class="abutton">Continue</a>
_x000D_
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:
There seems to be three solutions to this problem (all with pros and cons).
<form method="get" action="/page2">
<button type="submit">Continue</button>
</form>
But the problem with this is that in some version of popular browsers such as Chrome, Safari and Internet Explorer, it adds a question mark character to the end of the URL. So in other words for the code above your URL will end up looking like this:
http://someserver/pages2?
There is one way to fix this, but it will require server-side configuration. One example using Apache Mod_rewrite would be to redirect all requests with a trailing ?
to their corresponding URL without the ?
. Here is an example using .htaccess, but there is a full thread here:
RewriteCond %{THE_REQUEST} \?\ HTTP [NC]
RewriteRule ^/?(index\.cfm)? /? [R=301,L]
Similar configurations can vary depending on the webserver and stack used. So a summary of this approach:
Pros:
Cons:
?
looks ugly in some browsers. This can be fixed by a hack (in some cases) using POST instead of GET, but the clean way is to have a server-side redirect. The downside with the server side redirect is that it will cause an extra HTTP call for these links because of the 304 redirect.<form>
elementYou can use JavaScript to trigger onclick and other events to mimic the behavior of a link using a button. The example below could be improve and remove from the HTML, but it is there simply to illustrate the idea:
<button onclick="window.location.href='/page2'">Continue</button>
Pros:
Cons:
Styling a link like a button is relatively easy and can provide similar experience across different browsers. Bootstrap does this, but it is also easy to achieve on your own using simple styles.
Pros:
<form>
to work.Cons:
keypress
events on buttons.Solution #1 (Button in a form) seems like the most transparent for users with minimal work required. If your layout is not impacted by this choice and the server side tweak is feasible, this is a good option for cases where accessibility is the top priority (e.g. links on an error page or error messages).
If JavaScript is not an obstacle to your accessibility requirements, then solution #2 (JavaScript) would be preferred over #1 and #3.
If for some reason, accessibility is vital (JavaScript is not an option) but you are in a situation where your design and/or your server configuration is preventing you from using option #1, then solution #3 (Anchor styled like a button) is a good alternative solve this problem with minimal usability impact.
If you want to create a button that is used for a URL anywhere, create a button class for an anchor.
a.button {
background-color: #999999;
color: #FFFFFF !important;
cursor: pointer;
display: inline-block;
font-weight: bold;
padding: 5px 8px;
text-align: center;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.button:hover {
text-decoration: none;
}
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.
In JavaScript
setLocation(base: string) {
window.location.href = base;
}
In HTML
<button onclick="setLocation('/<whatever>')>GO</button>"
If you want to avoid having to use a form or an input and you're looking for a button-looking link, you can create good-looking button links with a div wrapper, an anchor and an h1
tag. You'd potentially want this so you can freely place the link-button around your page. This is especially useful for horizontally centering buttons and having vertically-centered text inside of them. Here's how:
Your button will be comprised of three nested pieces: a div wrapper, an anchor, and an h1, like so:
.link-button-wrapper {_x000D_
width: 200px;_x000D_
height: 40px;_x000D_
box-shadow: inset 0px 1px 0px 0px #ffffff;_x000D_
border-radius: 4px;_x000D_
background-color: #097BC0;_x000D_
box-shadow: 0px 2px 4px gray;_x000D_
display: block;_x000D_
border:1px solid #094BC0;_x000D_
}_x000D_
.link-button-wrapper > a {_x000D_
display: inline-table;_x000D_
cursor: pointer;_x000D_
text-decoration: none;_x000D_
height: 100%;_x000D_
width:100%;_x000D_
}_x000D_
.link-button-wrapper > a > h1 {_x000D_
margin: 0 auto;_x000D_
display: table-cell;_x000D_
vertical-align: middle;_x000D_
color: #f7f8f8;_x000D_
font-size: 18px;_x000D_
font-family: cabinregular;_x000D_
text-align: center;_x000D_
}
_x000D_
<div class="link-button-wrapper">_x000D_
<a href="your/link/here">_x000D_
<h1>Button!</h1>_x000D_
</a>_x000D_
</div>
_x000D_
Here's a jsFiddle to check it out and play around with it.
Benefits of this setup: 1. Making the div wrapper display: block makes it easy to center (using margin: 0 auto) and position (while an <a> is inline and harder to positionand not possible to center).
You could just make the <a> display:block, move it around, and style it as a button, but then vertically aligning text inside of it becomes hard.
This allows you to make the <a> display: inline-table and the <h4> display: table-cell, which allows you to use vertical-align: middle on the <h4> and center it vertically (which is always nice on a button). Yes, you could use padding, but if you want your button to dynamically resize, that won't be as clean.
Sometimes when you embed an <a> within a div, only the text is clickable, this setup makes the whole button clickable.
You don't have to deal with forms if you're just trying to move to another page. Forms are meant for inputting information, and they should be reserved for that.
Allows you to cleanly separte the button styling and text styling from each other (stretch advantage? Sure, but CSS can get nasty-looking so it's nice to decompose it).
It definitely made my life easier styling a mobile website for variable-sized screens.
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>
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.
HTML Answer: If you want to create a HTML button that acts like a link, use the 2 common atributtes for it: and/or action="":
<form action="stackoverflow.com"/>
<button type="submit" value="Submit Form"
OR...
"href" is part of the attribute. It helps direct links:
<a href="stackoverflow.com">Href</a>
You can simply put an a tag around the element:
<a href="http://google.com" target="_blank">
<button>My Button</button>
</a>
You can use javascript:
<html>_x000D_
<button onclick='window.location = "http://www.google.com"'>_x000D_
Google_x000D_
</button>_x000D_
_x000D_
</html>
_x000D_
Replace http://www.google.com
with your website, make sure to include http://
before the URL.
7 Ways to do that:
window.location.href = 'URL'
window.location.replace('URL')
window.location = 'URL'
window.open('URL')
window.location.assign('URL')
<!-- Using window.location.href = 'URL' -->_x000D_
<button onclick='window.location.href = "https://stackoverflow.com"'>_x000D_
Click Me_x000D_
</button>_x000D_
_x000D_
<!-- Using window.location.replace('URL') -->_x000D_
<button onclick='window.location.replace("https://stackoverflow.com")'>_x000D_
Click Me_x000D_
</button>_x000D_
_x000D_
<!-- Using window.location = 'URL' -->_x000D_
<button onclick='window.location = "https://stackoverflow.com"'>_x000D_
Click Me_x000D_
</button>_x000D_
_x000D_
<!-- Using window.open('URL') -->_x000D_
<button onclick='window.open("https://stackoverflow.com","_self","","")'>_x000D_
Click Me_x000D_
</button>_x000D_
_x000D_
<!-- Using window.location.assign('URL') -->_x000D_
<button onclick='window.location.assign("http://www.stackoverflow.com")'>_x000D_
Click Me_x000D_
</button>_x000D_
_x000D_
<!-- Using HTML form -->_x000D_
<form action='https://stackoverflow.com' method='get'>_x000D_
<input type='submit' value='Click Me'/>_x000D_
</form>_x000D_
_x000D_
<!-- Using HTML anchor tag -->_x000D_
<a href='https://stackoverflow.com'>_x000D_
<button>Click Me</button>_x000D_
</a>
_x000D_
Source: Stackoverflow.com