Questions Tags Users Badges Unanswered Ask Question

Take the 2-minute tour

Peter Mortensen
7,564 8 53 85
Andrew
31.6k 88 294 483
15 Answers active oldest votes
BalusC
510k 113 1502 1831
198
70
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?
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 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="/page2>Continue</a>
html button hyperlink htmlbutton
share| improve this question
edited Jul 21 at 15:22 asked May 25 '10 at 16:39
256
Put it in a <form> wherein you specify the desired target URL in the action attribute.
<form action="http://google.com">
<input type="submit" value="Go to Google">
</form>
share| improve this answer
answered May 25 '10 at 16:40
asked 4 years ago
viewed 634358 times
active 1 month ago
Looking for a job?
Senior Systems Administrator
Jonas Fitness
Webster, TX
active-directory windows
Software Development Manager,
Service Frameworks
Amazon
Seattle, WA / relocation
java c#
Director of SFA Firmware
Engineering //1439
DataDirect Networks
Spring, TX
project-management
Backend PHP Developer,
Infrastructure, Rest API
MediaFire
The Woodlands, TX
php mysql
Linked
4

How can I make a button
redirect my page to
another page?
0

hyperlink not in whole
button
48

How do I make an html
link look like a button?
0

IE9 window.location.href
error
0

Implementing link into
HTML/CSS button
1

Remove dash between
two button links
-3

a href link that will act like
a button
0

create a button and link
to a page
0

JAVA:send button in
email
1

My button becomes
misaligned when I wrap it
in an <a> tag
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no
registration required.
How to create an HTML button that acts like a link?
sign up

log in

tour

help

careers 2.0

search
converted by Web2PDFConvert.com
Bern
2,029 1 12 21
18 Simple and nice. A fine solution. Add display: inline to the form to keep the button in the flow.
Pekka May 25 '10 at 16:44
2 in my opinion this idea is correct because it is work if user disabled the javascript DELETE me May 25
'10 at 16:47
2 in safari, this adds a question mark to the end of the url...is there a way to do it that doesn't add anything to
the url? Andrew May 25 '10 at 20:03
2 @Andrew that is probably because of the GET method used by default by the form everywhere but in IE.
You could switch the form method to POST but that would have other consequences, namely when you
use the history to browse back after clicking the button. It may be unavoidable (it will have no effect
anyway). Pekka May 25 '10 at 20:09
2 @BalusC Nice solution, but if it is inside some other form (parent form), then pressing this button redirects
to address in the parent's form action attribute. Wlad Feb 4 at 16:08
show 5 more comments
142
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 and 3 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 (v2) sample appearance:
Bootstrap (v3) sample appearance:
Visit the Bootstrap (v2) or Bootstrap (v3) Buttons section for some samples.
share| improve this answer
edited Jan 17 at 9:03 answered Dec 5 '12 at 8:59
That's a good alternative. Thanks! Ricardo Jul 4 at 16:45
Best answer if you're using bootstrap. gwho Jul 28 at 23:58
see more linked questions
Related
33
How can I use the button
tag with ASP.NET?
0
How to add Return Home
button to external sites?
0
HTML <button>
containing image,
rendering incorrectly on
iPhone 4, any ideas?
0
Creating html button link -
not working
14
Is there a way to get a
<button> element to link
to a location without
wrapping it in an <a href
tag?
2
Creating a custom html
button with background
Image and Text
4
Button vs link vs input
type=submit on a form
2
How do I make an email
current page button in
HTML?
2
How to create an HTML
button that acts like a link
to an item on the same
page?
-3
a href link that will act like
a button
Hot Network Questions
Same data, new method, same
outcome can I publish it?
If any open set is a countable
union of balls, does it imply
separability?
Why didn't Molly Weasley
remember the platform
number?
1700s term for "a technology"
What does nut shell mean in
this context?
What can I do to paper to make
it look aged?
Hilbert's Hotel
Is it popular to request TA
presence in the classroom for
all lectures & is it right?
What makes mains voltage
safe in homes?
Grout has gone hard and I have
not finished can I add
something to it to soften grout
to finish the job
What's the name of this anime
to do with a Chinese dragon
and kids going missing?
Are all torsion groups finite
groups?
converted by Web2PDFConvert.com
Robert Harvey
106k 21 162 281
Adam
15.1k 5 42 81
Niels Keurentjes
18k 4 19 55
RedFilter
85.3k 6 141 179
Peter Mortensen
7,564 8 53 85
ghoppe
9,994 3 14 16
115
<button onclick="location.href='http://www.example.com'">
www.example.com</button>
share| improve this answer
edited May 25 '10 at 16:54 answered May 25 '10 at 16:44
Insn't it window.location.href='http://www.example.com' ? location.href doesn't seem to work for me
in IE9... pinouchon Dec 10 '12 at 14:15
@pinouchon Should work. window is implied. Could be an IE9 bug, stackoverflow.com/questions/7690645/
Adam Dec 10 '12 at 17:56
3 It seems that if you don't specify type="button" this won't always work. Looks like the button will default to
"submit" kenitech Feb 3 at 19:17
1 If you want to open the link in a new window/tab use: onclick="window.open('example.com','_blank');";
bennos Jun 16 at 11:02
@kenitech correct, according to specs: "The missing value default is the Submit Button state."
Niels Keurentjes Jul 20 at 13:26
53
<a href="http://www.stackoverflow.com/">
<button>click me</button>
</a>
Edit 22-06-2013: This markup is no longer valid in HTML5 and will neither validate nor always work as
potentially expected. Use another approach.
share| improve this answer
edited Jun 22 '13 at 17:43 answered May 25 '10 at 16:42
that's cool, didn't know that one. is that valid xhtml? Sean Patrick Floyd May 25 '10 at 16:44
2 Doesn't (X)HTML-validate. BalusC May 25 '10 at 16:47
24 @BalusC: Neither does this page Robert Harvey May 25 '10 at 16:50
1 @Rob: that's not my problem :) Throw it at Meta and see. However the target attribute is imo on the
edge. BalusC May 25 '10 at 16:55
3 Doesn't work in IE8 (Standards mode) Pieter Kuijpers Dec 22 '11 at 12:45
show 3 more comments
9
<form>
<input TYPE="button" VALUE="Home Page"
onclick="window.location.href='http://www.wherever.com'">
</form>
share| improve this answer
edited Jul 21 at 15:22 answered May 25 '10 at 16:41
4 @Robusto that was a snarky comment about the empty space that used to be there :) This is not a good
solution IMO, as it won't work without JavaScript. Pekka May 25 '10 at 16:47
1 @seanizer it is possible to delete comments, which BalusC and I did. Pekka May 25 '10 at 16:49
1 @Pekka: yup, and also it's not even well-formed xhtml Sean Patrick Floyd May 25 '10 at 16:49
@Pekka: ah, me too :-) Sean Patrick Floyd May 25 '10 at 16:51
3 if using form just use a submit, if using onclick why bother with the form. -1 NimChimpsky Apr 26 '13 at
10:14
show 2 more comments
What is the benefit of writing
lecture notes for an introductory
course vs using a textbook?
Numbers too large for R. How
to approximate probability
mass function?
I have and will
What physical contact, if any,
is acceptable between a
supervisor and a student?
Why latex doesn't recognize
my subfigures?
My employer wants me to write
a guide for doing my job
what is pts/0 , :0 and attributes
before it + ,? etc
What were the conditions laid
down by Ananda when asked
to be Buddhas personal
attendant?
Periodic trend in difference of
energy between the s and p
orbitals
Dissolve tool misses out two
polygons
Getting the number of
frequency in a list
What can PCs buy out of
game?
converted by Web2PDFConvert.com
Peter Mortensen
7,564 8 53 85
Lucian Minea
125 1 6
Peter Mortensen
7,564 8 53 85
artie
51 4
MuffinTheMan
374 2 11
6
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="new" .
share| improve this answer
edited Jul 21 at 15:27 answered Feb 11 at 15:29
Exactly the same as virkram jain's answer from Jan 26 RyanS Feb 11 at 15:32
Yes, they can, I'm using them all the time. Lucian Minea Mar 11 at 12:12
4
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.
share| improve this answer
edited Jul 21 at 15:26 answered Dec 3 '13 at 5:09
my prefered solution, because can used in another form user11012 Jan 26 at 0:43
2
Are there any downsides to doing something like the following?
<a class='nostyle' href='http://www.google.com/'>
<span class='button'>Schedule</span>
</a>
Where a.nostyle is a class that has your link styling (where you can get rid of the standard link
styling) and span.button is a class that has the styling for your "button" (background, border,
gradient, etc.).
share| improve this answer
answered Mar 30 '13 at 22:46
converted by Web2PDFConvert.com
lukeocom
2,101 1 4 20
Peter Mortensen
7,564 8 53 85
Pekka
256k 67 526 757
2
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.
share| improve this answer
edited Jan 16 at 5:46 answered Jan 16 at 4:28
2 Keep in mind the spec says this is not valid as buttons should not contain any interactive descendants.
w3.org/TR/2011/WD-html5-20110525/the-button-element.html lukeocom Jan 20 at 5:05
2
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.
share| improve this answer
edited Jul 21 at 15:24 answered May 25 '10 at 16:41
I think he is talking about not only functionality (click) but also appearance. Web Logic May 25 '10 at
16:44
1 @Web Logic yup, that's why I'm talking about styling the link to look like a button. Pekka May 25 '10 at
16:46
1 "which is not good for accessibility." citation required Chris Marisic Aug 6 at 14:22
@ChrisMarisic there's many downsides to using onClick: it doesn't work with JS turned off; the user can't
open a link in a new tab/window, nor copy the link into their clipboard for sharing; parsers and bots won't be
able to recognize and follow the link; browsers with a "prefetch" feature won't recognize the link; and many
more. Pekka Aug 6 at 15:06
1 While those are valid points, I don't really think that really address accessibility. Did you mean usability, not
accessibility? In web development accessibility is usually reserved to be specifically about whether users
who have visual impairments can operate your application well. Chris Marisic Aug 6 at 15:50
2
I know this is old but just discovered this trick and wanted to share since I haven't seen anything like this.
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 a 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:
<div class="link-button-wrapper">
<a href="your/link/here">
<h1>Button!</h1>
</a>
</div>
Then in CSS, your styling should look like so:
converted by Web2PDFConvert.com
MoMo
91 6
Nemanja
134 2 11
.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;
}
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 is inline and harder to positionand not possible to center)
1. You could just make the display:block, move it around, and style it as a button, but then vertically
aligning text inside of it becomes hard
2. This allows you to make the display: inline-table and the display: table-cell, which allows you to use
vertical-align: middle on the 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
3. Sometimes when you embed an within a div, only the text is clickable, this setup makes the whole
button clickable
4. Don't have to deal with forms if you're just trying to move to another page. Forms are meant for
inputting information, they should be reserved for that
5. 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)
Let me know what you think! Definitely made my life easier styling a mobile website for variable-size
screens.
share| improve this answer
answered Aug 13 at 3:49
1
Use it as data-href="index.html" inside the button tag.
share| improve this answer
edited Aug 4 at 2:48 answered Aug 3 at 21:34
+1 i wasn't specifically looking for this but i'm going to steal this Chris Marisic Aug 6 at 14:23
converted by Web2PDFConvert.com
Maarek
384 3 5
Peter Mortensen
7,564 8 53 85
user33443
11 3
0
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;
}
share| improve this answer
answered Nov 15 '13 at 17:34
0
Regarding BalusC's reply,
<form action="http://google.com">
<input type="submit" value="Go to Google">
</form>
I needed to add variables to the button and wasn't sure how. I ended up using input type hidden. I
thought this might be helpful to others who found this page like myself.
share| improve this answer
edited Jul 21 at 15:29 answered Jun 18 at 17:25
converted by Web2PDFConvert.com
tour help badges blog chat data legal privacy policy work here advertising info mobile contact us feedback
TECHNOLOGY LIFE / ARTS CULTURE /
RECREATION
SCIENCE OTHER
Logan Wayne
1,068 3 7 24
0
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
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
}
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:
JS Fiddle
share| improve this answer
answered Jul 23 at 8:50
Set the button type="button", that will allow you to click it without submitting the form. Blake A. Nichols
Aug 7 at 20:02
protected by Community Oct 28 '13 at 22:25
Thank you for your interest in this question. Because it has attracted low-quality answers, posting an answer now
requires 10 reputation on this site.
Would you like to answer one of these unanswered questions instead?
Not the answer you're looking for? Browse other questions tagged html button
hyperlink htmlbutton or ask your own question.
question feed
converted by Web2PDFConvert.com
Stack Overflow
Server Fault
Super User
Web Applications
Ask Ubuntu
Webmasters
Game Development
TeX - LaTeX
Programmers
Unix & Linux
Ask Different (Apple)
WordPress
Development
Geographic
Information Systems
Electrical Engineering
Android Enthusiasts
Information Security
Database
Administrators
Drupal Answers
SharePoint
User Experience
Mathematica
Salesforce
more (13)
Photography
Science Fiction &
Fantasy
Graphic Design
Seasoned Advice
(cooking)
Home Improvement
Personal Finance &
Money
Academia
more (10)
English Language &
Usage
Skeptics
Mi Yodeya (Judaism)
Travel
Christianity
Arqade (gaming)
Bicycles
Role-playing Games
more (21)
Mathematics
Cross Validated
(stats)
Theoretical Computer
Science
Physics
MathOverflow
more (7)
Stack Apps
Meta Stack Exchange
Area 51
Stack Overflow
Careers
site design / logo 2014 stack exchange inc; user contributions licensed under cc by-sa 3.0 with attribution required
rev 2014.9.20.1879
converted by Web2PDFConvert.com