Related
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.
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).
Go to Google
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.
Go to Google
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.
<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.
The <button> type must be "submit" (or unspecified) - I couldn't get it working with type "button." Which brings up the 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: formaction
Browser Support: <button>: The Button element
It is actualy very simple and without using any form elements. You can just use the <a> tag with a button inside :).
Like this:
<button>Click me !</button>
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.
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>
You can simply put a tag around the element:
<a href="http://google.com" target="_blank">
<button>My Button</button>
</a>
https://jsfiddle.net/hj6gob8b/
There seems to be three solutions to this problem (all with pros and cons).
Solution 1: Button in a form.
<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:
This is a real button, and semantically it makes sense.
Since it is a real button, it will also act like a real button (e.g. draggable behavior and/or mimic a click when pressing space bar when active).
No JavaScript, no complex style required.
Cons:
Trailing ? 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.
Adds extra <form> element
Element positioning when using multiple forms can be tricky and becomes even worse when dealing with responsive designs. Some layout can become impossible to achieve with this solution depending on the order of the elements. This can end up impacting usability if the design is impacted by this challenge.
Solution 2: Using JavaScript.
You 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:
Simple (for basic requirement) and keep semantic while not requiring an extra form.
Since it is a real button, it will also act like a real button (e.g. draggable behavior and/or mimic a click when pressing space bar when active).
Cons:
Requires JavaScript which means less accessible. This is not ideal for a base (core) element such as a link.
Solution 3: Anchor (link) styled like a button.
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:
Simple (for basic requirement) and good cross-browser support.
Does not need a <form> to work.
Does not need JavaScript to work.
Cons:
Semantic is sort of broken, because you want a button that acts like a link and not a link that acts like a button.
It will not reproduce all behaviors of solution #1. It will not support the same behavior as button. For example, links react differently when dragged. Also the "space bar" link trigger will not work without some extra JavaScript code. It will add a lot of complexity since browsers are not consistent on how they support keypress events on buttons.
Conclusion
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.
Just place your button inside of a reference tag, e.g.,
<button>Next</button>
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.
<button>Next</button>
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 file 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 are included at the end of the URL.
By the way - (%20 denotes a space in a URL it 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 of the main.html URL, x is determined by your own connection, so obviously it 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.
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 {
width: 200px;
height: 40px;
box-shadow: inset 0px 1px 0px 0px #ffffff;
border-radius: 4px;
background-color: #097BC0;
box-shadow: 0px 2px 4px gray;
display: block;
border:1px solid #094BC0;
}
.link-button-wrapper > a {
display: inline-table;
cursor: pointer;
text-decoration: none;
height: 100%;
width:100%;
}
.link-button-wrapper > a > h1 {
margin: 0 auto;
display: table-cell;
vertical-align: middle;
color: #f7f8f8;
font-size: 18px;
font-family: cabinregular;
text-align: center;
}
<div class="link-button-wrapper">
<a href="your/link/here">
<h1>Button!</h1>
</a>
</div>
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 <h1> display: table-cell, which allows you to use vertical-align: middle on the <h1> 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.
Seven ways to do that:
Using window.location.href = 'URL'
Using window.location.replace('URL')
Using window.location = 'URL'
Using window.open('URL')
Using window.location.assign('URL')
Using HTML form
Using HTML anchor tag
<!-- Using window.location.href = 'URL' -->
<button onclick='window.location.href = "https://stackoverflow.com"'>
Click Me
</button>
<!-- Using window.location.replace('URL') -->
<button onclick='window.location.replace("https://stackoverflow.com")'>
Click Me
</button>
<!-- Using window.location = 'URL' -->
<button onclick='window.location = "https://stackoverflow.com"'>
Click Me
</button>
<!-- Using window.open('URL') -->
<button onclick='window.open("https://stackoverflow.com","_self","","")'>
Click Me
</button>
<!-- Using window.location.assign('URL') -->
<button onclick='window.location.assign("http://www.stackoverflow.com")'>
Click Me
</button>
<!-- Using HTML form -->
<form action='https://stackoverflow.com' method='get'>
<input type='submit' value='Click Me'/>
</form>
<!-- Using HTML anchor tag -->
<a href='https://stackoverflow.com'>
<button>Click Me</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 details, see the site I found this on.
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.
To Nicolas' answer, the following worked for me as that answer didn't have type="button" due to which it started behaving as submit type...since I already have one submit type. It didn't work for me ... and now you can either add a class to the button or to <a> to get the required layout:
<a href="http://www.google.com/">
<button type="button">Click here</button>
</a>
Another option is to create a link in the button:
<button type="button">Link link</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.
Keep in mind the spec says this is not valid as buttons should not contain any interactive descendants.
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;
}
I knew 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:
Use the <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.
This solution works without JavaScript enabled. The fallback will add a ? to the end of the URL though.
If JavaScript is enabled then you can use jQuery/JavaScript to handle following the link, so that ? 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.
The JavaScript code uses event delegation so you can attach an event listener before the <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.
The JavaScript code prevents the default action from happening and then follows the link given in the <form> action attribute.
JSBin Example (code snippet can't follow links)
// 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;
});
<!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" role="link">Link</button>
</form>
</body>
</html>
Create a button using the <a> tag and add proper CSS content:
.abutton {
background: #bada55; padding: 5px; border-radius: 5px;
transition: 1s; text-decoration: none; color: black;
}
.abutton:hover { background: #2a2; }
Continue
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>
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:
JSFiddle
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">
<input type="text" name="somefield" />
<button type="button">Go to Target!</button>
<button type="submit">submit form</button>
</form>
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 a styled button along with an 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>
You can use JavaScript:
<html>
<button onclick='window.location = "http://www.google.com"'>
Google
</button>
</html>
Replace http://www.google.com with your website, and make sure to include http:// before the URL.
I used this for a website I'm currently working on and it worked 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;
}
<input type="submit" name="submit" onClick="window.location= 'http://example.com'">
A working JSFiddle is here.
In JavaScript
setLocation(base: string) {
window.location.href = base;
}
In HTML
<button onclick="setLocation('/<whatever>')>GO</button>"
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>
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:
Href
The Bootstrap approach also works with Bulma.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.2/css/bulma.min.css">
Stack Overflow
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.
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).
Go to Google
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.
Go to Google
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.
<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.
The <button> type must be "submit" (or unspecified) - I couldn't get it working with type "button." Which brings up the 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: formaction
Browser Support: <button>: The Button element
It is actualy very simple and without using any form elements. You can just use the <a> tag with a button inside :).
Like this:
<button>Click me !</button>
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.
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>
You can simply put a tag around the element:
<a href="http://google.com" target="_blank">
<button>My Button</button>
</a>
https://jsfiddle.net/hj6gob8b/
There seems to be three solutions to this problem (all with pros and cons).
Solution 1: Button in a form.
<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:
This is a real button, and semantically it makes sense.
Since it is a real button, it will also act like a real button (e.g. draggable behavior and/or mimic a click when pressing space bar when active).
No JavaScript, no complex style required.
Cons:
Trailing ? 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.
Adds extra <form> element
Element positioning when using multiple forms can be tricky and becomes even worse when dealing with responsive designs. Some layout can become impossible to achieve with this solution depending on the order of the elements. This can end up impacting usability if the design is impacted by this challenge.
Solution 2: Using JavaScript.
You 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:
Simple (for basic requirement) and keep semantic while not requiring an extra form.
Since it is a real button, it will also act like a real button (e.g. draggable behavior and/or mimic a click when pressing space bar when active).
Cons:
Requires JavaScript which means less accessible. This is not ideal for a base (core) element such as a link.
Solution 3: Anchor (link) styled like a button.
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:
Simple (for basic requirement) and good cross-browser support.
Does not need a <form> to work.
Does not need JavaScript to work.
Cons:
Semantic is sort of broken, because you want a button that acts like a link and not a link that acts like a button.
It will not reproduce all behaviors of solution #1. It will not support the same behavior as button. For example, links react differently when dragged. Also the "space bar" link trigger will not work without some extra JavaScript code. It will add a lot of complexity since browsers are not consistent on how they support keypress events on buttons.
Conclusion
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.
Just place your button inside of a reference tag, e.g.,
<button>Next</button>
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.
<button>Next</button>
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 file 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 are included at the end of the URL.
By the way - (%20 denotes a space in a URL it 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 of the main.html URL, x is determined by your own connection, so obviously it 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.
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 {
width: 200px;
height: 40px;
box-shadow: inset 0px 1px 0px 0px #ffffff;
border-radius: 4px;
background-color: #097BC0;
box-shadow: 0px 2px 4px gray;
display: block;
border:1px solid #094BC0;
}
.link-button-wrapper > a {
display: inline-table;
cursor: pointer;
text-decoration: none;
height: 100%;
width:100%;
}
.link-button-wrapper > a > h1 {
margin: 0 auto;
display: table-cell;
vertical-align: middle;
color: #f7f8f8;
font-size: 18px;
font-family: cabinregular;
text-align: center;
}
<div class="link-button-wrapper">
<a href="your/link/here">
<h1>Button!</h1>
</a>
</div>
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 <h1> display: table-cell, which allows you to use vertical-align: middle on the <h1> 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.
Seven ways to do that:
Using window.location.href = 'URL'
Using window.location.replace('URL')
Using window.location = 'URL'
Using window.open('URL')
Using window.location.assign('URL')
Using HTML form
Using HTML anchor tag
<!-- Using window.location.href = 'URL' -->
<button onclick='window.location.href = "https://stackoverflow.com"'>
Click Me
</button>
<!-- Using window.location.replace('URL') -->
<button onclick='window.location.replace("https://stackoverflow.com")'>
Click Me
</button>
<!-- Using window.location = 'URL' -->
<button onclick='window.location = "https://stackoverflow.com"'>
Click Me
</button>
<!-- Using window.open('URL') -->
<button onclick='window.open("https://stackoverflow.com","_self","","")'>
Click Me
</button>
<!-- Using window.location.assign('URL') -->
<button onclick='window.location.assign("http://www.stackoverflow.com")'>
Click Me
</button>
<!-- Using HTML form -->
<form action='https://stackoverflow.com' method='get'>
<input type='submit' value='Click Me'/>
</form>
<!-- Using HTML anchor tag -->
<a href='https://stackoverflow.com'>
<button>Click Me</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 details, see the site I found this on.
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.
To Nicolas' answer, the following worked for me as that answer didn't have type="button" due to which it started behaving as submit type...since I already have one submit type. It didn't work for me ... and now you can either add a class to the button or to <a> to get the required layout:
<a href="http://www.google.com/">
<button type="button">Click here</button>
</a>
Another option is to create a link in the button:
<button type="button">Link link</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.
Keep in mind the spec says this is not valid as buttons should not contain any interactive descendants.
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;
}
I knew 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:
Use the <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.
This solution works without JavaScript enabled. The fallback will add a ? to the end of the URL though.
If JavaScript is enabled then you can use jQuery/JavaScript to handle following the link, so that ? 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.
The JavaScript code uses event delegation so you can attach an event listener before the <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.
The JavaScript code prevents the default action from happening and then follows the link given in the <form> action attribute.
JSBin Example (code snippet can't follow links)
// 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;
});
<!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" role="link">Link</button>
</form>
</body>
</html>
Create a button using the <a> tag and add proper CSS content:
.abutton {
background: #bada55; padding: 5px; border-radius: 5px;
transition: 1s; text-decoration: none; color: black;
}
.abutton:hover { background: #2a2; }
Continue
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>
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:
JSFiddle
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">
<input type="text" name="somefield" />
<button type="button">Go to Target!</button>
<button type="submit">submit form</button>
</form>
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 a styled button along with an 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>
You can use JavaScript:
<html>
<button onclick='window.location = "http://www.google.com"'>
Google
</button>
</html>
Replace http://www.google.com with your website, and make sure to include http:// before the URL.
I used this for a website I'm currently working on and it worked 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;
}
<input type="submit" name="submit" onClick="window.location= 'http://example.com'">
A working JSFiddle is here.
In JavaScript
setLocation(base: string) {
window.location.href = base;
}
In HTML
<button onclick="setLocation('/<whatever>')>GO</button>"
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>
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:
Href
The Bootstrap approach also works with Bulma.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.2/css/bulma.min.css">
Stack Overflow
So, I have a DIV full of four HTML buttons that use an image instead of any text. Using CSS, I style it so that the img is the same width as its parent button. On three of the four buttons, they will always carry the cursor: pointer attribute because they will always be clickable. The fourth button, however, will occasionally be in a state in which it is disabled, so I have to toggle the CSS between cursor: pointer and cursor: default.
As my code stands, this works properly in Chrome and IE 7/8/9 (6 is not in my supported audience), however Firefox does not change cursor from default for any of them, regardless of if one of the buttons are disabled. Note that while this does work when I apply the cursor attribute to the parent BUTTON element, I'd prefer to use CSS to have the cursor change rather than use any client-side Javascript. Since this works in two of the three modern browsers I'm testing (including IE7, mind you!), I thought it should be possible in FF too.
Here's the HTML markup that I have:
<button id="btn1" class="my-button"><img src="/path/to/my-img1.gif" alt="Img1" /></button>
<button id="btn2" class="my-button"><img src="/path/to/my-img2.gif" alt="Img2" /></button>
<button id="btn3" class="my-button"><img src="/path/to/my-img3.gif" alt="Img3" /></button>
<button id="btn4" class="my-button"><img src="/path/to/my-img4.gif" alt="Img4" /></button>
And here are the CSS classes that I have designated for this markup, as well:
<style>
.my-button {
display: block;
float: left;
margin: 0px;
padding: 0px;
vertical-align: top;
border: none;
background: none;
}
.my-button img {
cursor: pointer;
}
.my-button img .disabled {
cursor: default;
}
</style>
And for anyone with any of that pesky curiosity, all of the click events and action is handled with jQuery depending on whatever business logic I need to go with it and the surrounding page.
If there's more information that I can furnish, please let me know. I feel like I came across a Firefox stumbling block here.
Edit: For reference, I'm using Firefox 4.0 with Firebug installed. Same behavior whether I have a Firebug on for that tab or not. Chrome is up-to-date, currently at version 10.0.648.204.
Edit 2: As I've denoted in the comments below, I still have not figured out a solution to this issue, but have settled on using #wdm's answer as a temporary solution - this way Firefox gets cursor: pointer set for all buttons regardless of state, and Chrome and IE will obey the CSS I put forth for the embedded img in each button tag. If I find out what's going on in my code or if someone else finds a proper solution for Firefox, I'll move the answer there. Thanks again for the suggestions!
Have you tried?
.my-button {
cursor: pointer;
}
EDIT: You could also make a separate class with "cursor:pointer" and use jQuery's .addClass() .removeClass() depending on the state. Or have jQuery directly alter the css with
.css("cursor", "pointer");
EDIT: One more idea...
button {
cursor: pointer;
}
button:disabled {
cursor: default;
}
Seems to be working for me in all major browsers.
Two possible fixes:
1 - Use <input type="image" src="/path/to/my-img1.gif"> instead of nesting <img> in <button>
2 - Use .mybutton:hover { cursor: pointer; } for the CSS.
The issue is that .disabled is a class, not a pseudo-class. It matches any <button class="disabled...
If you want to select every disabled button, you have to use the :disabled pseudo-class, which automatically selects all the buttons in the disabled state.
I believe that the correct version of your code would be as follows, though I cannot check it at this time:
.my-button :disabled img {
cursor: default;
}
The pseudo-class is defined by the w3c here: http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#UIstates
They have a demo of it: http://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/html/full/flat/css3-modsel-24.html
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.
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).
Go to Google
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.
Go to Google
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.
<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.
The <button> type must be "submit" (or unspecified) - I couldn't get it working with type "button." Which brings up the 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: formaction
Browser Support: <button>: The Button element
It is actualy very simple and without using any form elements. You can just use the <a> tag with a button inside :).
Like this:
<button>Click me !</button>
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.
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>
You can simply put a tag around the element:
<a href="http://google.com" target="_blank">
<button>My Button</button>
</a>
https://jsfiddle.net/hj6gob8b/
There seems to be three solutions to this problem (all with pros and cons).
Solution 1: Button in a form.
<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:
This is a real button, and semantically it makes sense.
Since it is a real button, it will also act like a real button (e.g. draggable behavior and/or mimic a click when pressing space bar when active).
No JavaScript, no complex style required.
Cons:
Trailing ? 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.
Adds extra <form> element
Element positioning when using multiple forms can be tricky and becomes even worse when dealing with responsive designs. Some layout can become impossible to achieve with this solution depending on the order of the elements. This can end up impacting usability if the design is impacted by this challenge.
Solution 2: Using JavaScript.
You 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:
Simple (for basic requirement) and keep semantic while not requiring an extra form.
Since it is a real button, it will also act like a real button (e.g. draggable behavior and/or mimic a click when pressing space bar when active).
Cons:
Requires JavaScript which means less accessible. This is not ideal for a base (core) element such as a link.
Solution 3: Anchor (link) styled like a button.
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:
Simple (for basic requirement) and good cross-browser support.
Does not need a <form> to work.
Does not need JavaScript to work.
Cons:
Semantic is sort of broken, because you want a button that acts like a link and not a link that acts like a button.
It will not reproduce all behaviors of solution #1. It will not support the same behavior as button. For example, links react differently when dragged. Also the "space bar" link trigger will not work without some extra JavaScript code. It will add a lot of complexity since browsers are not consistent on how they support keypress events on buttons.
Conclusion
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.
Just place your button inside of a reference tag, e.g.,
<button>Next</button>
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.
<button>Next</button>
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 file 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 are included at the end of the URL.
By the way - (%20 denotes a space in a URL it 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 of the main.html URL, x is determined by your own connection, so obviously it 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.
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 {
width: 200px;
height: 40px;
box-shadow: inset 0px 1px 0px 0px #ffffff;
border-radius: 4px;
background-color: #097BC0;
box-shadow: 0px 2px 4px gray;
display: block;
border:1px solid #094BC0;
}
.link-button-wrapper > a {
display: inline-table;
cursor: pointer;
text-decoration: none;
height: 100%;
width:100%;
}
.link-button-wrapper > a > h1 {
margin: 0 auto;
display: table-cell;
vertical-align: middle;
color: #f7f8f8;
font-size: 18px;
font-family: cabinregular;
text-align: center;
}
<div class="link-button-wrapper">
<a href="your/link/here">
<h1>Button!</h1>
</a>
</div>
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 <h1> display: table-cell, which allows you to use vertical-align: middle on the <h1> 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.
Seven ways to do that:
Using window.location.href = 'URL'
Using window.location.replace('URL')
Using window.location = 'URL'
Using window.open('URL')
Using window.location.assign('URL')
Using HTML form
Using HTML anchor tag
<!-- Using window.location.href = 'URL' -->
<button onclick='window.location.href = "https://stackoverflow.com"'>
Click Me
</button>
<!-- Using window.location.replace('URL') -->
<button onclick='window.location.replace("https://stackoverflow.com")'>
Click Me
</button>
<!-- Using window.location = 'URL' -->
<button onclick='window.location = "https://stackoverflow.com"'>
Click Me
</button>
<!-- Using window.open('URL') -->
<button onclick='window.open("https://stackoverflow.com","_self","","")'>
Click Me
</button>
<!-- Using window.location.assign('URL') -->
<button onclick='window.location.assign("http://www.stackoverflow.com")'>
Click Me
</button>
<!-- Using HTML form -->
<form action='https://stackoverflow.com' method='get'>
<input type='submit' value='Click Me'/>
</form>
<!-- Using HTML anchor tag -->
<a href='https://stackoverflow.com'>
<button>Click Me</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 details, see the site I found this on.
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.
To Nicolas' answer, the following worked for me as that answer didn't have type="button" due to which it started behaving as submit type...since I already have one submit type. It didn't work for me ... and now you can either add a class to the button or to <a> to get the required layout:
<a href="http://www.google.com/">
<button type="button">Click here</button>
</a>
Another option is to create a link in the button:
<button type="button">Link link</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.
Keep in mind the spec says this is not valid as buttons should not contain any interactive descendants.
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;
}
I knew 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:
Use the <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.
This solution works without JavaScript enabled. The fallback will add a ? to the end of the URL though.
If JavaScript is enabled then you can use jQuery/JavaScript to handle following the link, so that ? 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.
The JavaScript code uses event delegation so you can attach an event listener before the <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.
The JavaScript code prevents the default action from happening and then follows the link given in the <form> action attribute.
JSBin Example (code snippet can't follow links)
// 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;
});
<!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" role="link">Link</button>
</form>
</body>
</html>
Create a button using the <a> tag and add proper CSS content:
.abutton {
background: #bada55; padding: 5px; border-radius: 5px;
transition: 1s; text-decoration: none; color: black;
}
.abutton:hover { background: #2a2; }
Continue
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>
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:
JSFiddle
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">
<input type="text" name="somefield" />
<button type="button">Go to Target!</button>
<button type="submit">submit form</button>
</form>
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 a styled button along with an 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>
You can use JavaScript:
<html>
<button onclick='window.location = "http://www.google.com"'>
Google
</button>
</html>
Replace http://www.google.com with your website, and make sure to include http:// before the URL.
I used this for a website I'm currently working on and it worked 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;
}
<input type="submit" name="submit" onClick="window.location= 'http://example.com'">
A working JSFiddle is here.
In JavaScript
setLocation(base: string) {
window.location.href = base;
}
In HTML
<button onclick="setLocation('/<whatever>')>GO</button>"
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>
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:
Href
The Bootstrap approach also works with Bulma.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.2/css/bulma.min.css">
Stack Overflow
We have buttons of many sizes and colors that use background images. There is a label on the background image itself, but we need to keep the button's text in the HTML for usability/accessibility. How do I make the text disappear in all browsers?
Modern browsers are easy, I just used -
color: transparent;
It's Internet Explorer 7 that I can't get to comply. I've tried these CSS properties, and none of them can remove the text completely without destroying my site's layout in the process.
font-size: 0px;
line-height: 0;
text-indent: -1000em;
display: block;
padding-left: 1000px;
I would very much appreciate any help.
Personally, I go for the all CSS approach:
{ display: block;
text-indent: -9999em;
text-transform: uppercase; }
For whatever reason, text-transform: uppercase; does the trick for IE7. Of course, you'll probably have your own CSS along with that for additional styling (if needed).
Additional to your
color: transparent;
You can use something like
padding-left: 3000px;
overflow: hidden;
Regards
In some cases you can use the propery "content" to change what is contained in the element, personally though I would use javascript to do it.
Just write blank text into the element.
If the button is an input submit button, use the image
<input type="image" src="/images/some_image.png" />
You can style this with CSS
input[type="image"] {
border: 1px solid red;
width: 150px;
height: 35px;
}
If they are links, Dave provided the answer.
How do I make the text disappear in
all browsers?
I suppoose you want the altarnative text to disappear if the image is loaded.
For this puprpose you can use this:
<INPUT TYPE="image" SRC="images/yourButtongif" HEIGHT="30" WIDTH="100" ALT="Text In Case There Is No Image" />
You can apply additional styles if needed, but this minimum will do the job for you.
If I understand the question correctly, this might work (I don't have IE7 to test on at the moment, so not 100% sure)
For markup like this:
<a href="javascript:return false;" class="button" id="buttonOK"><span
class="icon">Ok</span></a>
Use this css:
span.icon {
/*visibility: hidden;*/
display:block;
margin-left:-1000;
width:100px;
}
or this might work depending on your requirements for usability/accessibility:
span.icon {
visibility: hidden;
}
I don't know what users / programs the labels need to be in the HTML for, but if it's for text browsers and such, maybe you could insert a JavaScript that removes the labels onLoad?
JQuery or Prototype would make that very easy.