How do I create an HTML button that acts like a link?

Question

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.

Unlash

Change GET to POST. Nobody seems to have addressed the OP's first problem, which was the ? on the URL. This is caused by the form being type="GET", change this to type="POST" and the ? at the end of the URL disappears. This is because GET sends all variables in the URL, hence the ?. – Ngocnguyen

@Ngocnguyen This works in a context where you are not strict about which method you accept for your pages. In a context where you reject posts on pages that are expecting GET it will fail. I still think that using a link make sense with the caveat that it will not react to "spacebar" when active like button does. Also some style and behavior will be different (such as draggable). If you want the true "button-link" experience, having server side redirects for URL finishing by ? to remove it might be also an option. – Knotgrass

cssbuttongenerator.com might come in handy if you want to create a button with css. – Coal

I think it is better iade to create a link that looks like a button – Difference

Just a note, for me "button acts like link" means, that I can do right-click and decide whether to open in new tab/window, which is not working with JS solutions... – Counts

Form submission works even when JavaScript is turned off. And forms can act like Bootstrap columns or other styling, if you add class or style attributes to the button element. Is the trailing ? still a problem in 2021? – Sulphone

This is the most copied question on SO. – Haigh

@Ngocnguyen Changing a GET to a POST just to not have a ? on the URL is a terrible idea. GET means send me the information at this place, POST means something is being changed on the server. If you refresh a page after a POST, you get a warning. Caching is disabled. CDNs will behave differently. If you want something that "acts like a link", the correct solution is to use a link. You can then style the link or something inside it to look like a button. You could probably even put an actual <button> into the <a> tag. – Chub

You might want to avoid using a button as a link, as some browsers treat them differently. You can style a <a> to make it look like a button – Nikolaus

There are a lot of duplicate answers. – Thimerosal

For some reason, the cleanup of duplicate answers for this question is much more efficient (100 answers of which 59 are deleted (41 left)). – Thimerosal

Answer 1

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.

<a href="https://google.com" class="button">Go to Google</a>

a.button {
    padding: 1px 6px;
    border: 1px outset buttonborder;
    border-radius: 3px;
    color: buttontext;
    background-color: buttonface;
    text-decoration: none;
}

Or pick one of those many CSS libraries like Bootstrap.

<a href="https://google.com" class="btn btn-primary">Go to Google</a>

Noted should be that, historically, the CSS appearance:button property worked as well in some browsers, but this was experimental and ended up being considered a misfeature. Only none or auto are allowed on <a> elements.

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.

Gain

Simple and nice. A fine solution. Add display: inline to the form to keep the button in the flow. – Methenamine

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? – Unlash

@Unlash 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). – Methenamine

@Gain 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. – Unamuno

@Wlad: nesting forms is illegal in HTML anyway. Browser's behavior is unspecified and should not be relied upon. – Gain

@Wlad if you'd like this functionality, using a form, "inside" the form, keeping it "legal", you could place it outside the parent form and position it using css – Inoculation

Is it just me or is the <button> tag missing an obvious href attribute? – Reynold

I like to add style="cursor:pointer;" to make act like a link also. – Compensatory

This will not work when the page your linking to already has get variables encoded in it (i.e. http://domain.com/search?query=test). Compound that with the fact that it will add a question mark and I really feel this should not be chosen as the correct answer -- it encourages people to use a hack that will eventually fail in edge cases. – Proffitt

Looks simple and nice, but may have side effects if not considered properly. i.e. creating 2nd form in page, nested form etc. – Aneto

@Tejasvi: "Side effects"? Those things are just basic HTML mistakes. The HTML developer would then better take a step back and restart learning basic HTML. – Gain

This is not really a great solution semantically. <a href=""> is the correct way to create a link. Plus you might run into some difficulty if your site is https and you're using this method to link to a non https page. – Orvah

@gerdi: Why would the href attribute make sense on the button element, let alone obviously so? A button is not a hyperlink. That said, perhaps XHTML 2 will be of interest to you... – Snodgrass

What if I want CTRL + Click to open the link in a new tab? This won't work with a button – Wart

I used that but in the end I had to copy all button attributes to this class so that the button looks exactly the same. Without it text of the button barely fit within the button borders. – Royden

this would only mimic opening the link in the target window rather than target blank – Pyrometallurgy

this seems to work:<a href="w3schools.com"> <button> Button </button> </a> – Sigridsigsmond

Unfortunately the Company Outlook blocks the button unless you press additional step "View in Browser". Any ideas how to get around that? – Friesland

Why would you have a form submit approach just for navigation?? Ridiculous – Jeopardous

The problem is the "A that looks like a button" is that it doesn't automatically respond to the enter key, right? @AdamHey perhaps because the destination of the link is dynamic based on the content of the form? – Zebulun

The problem with the HTML example is that when query params are added, form will not respect them and proceed without as technically they will have to be <input>s within the <form>. – Alleluia

You should reconsider why and if you need a button in your design. If really necessary, you can style anchor elements to look like a button really quickly, no need for bootstrap. – Gasiform

@MonkeyVoodoo: indeed. – Gain

Accessibility speaking, which one do you think is better between the form and the JS one? – Rositaroskes

the form only didn't work for me – Albano

You forgot that you can wrap a <button> in an anchor link, or vice-versa. – Yellowlegs

Nope, I didn't forgot that ;) – Gain

Answer 2

<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.

Berm

Insn't it window.location.href='http://www.example.com' ? location.href doesn't seem to work for me in IE9... – Celisse

@pinouchon Should work. window is implied. Could be an IE9 bug, #7691145 – Berm

It seems that if you don't specify type="button" this won't always work. Looks like the button will default to "submit" – Shoulders

If you want to open the link in a new window/tab use: onclick="window.open('example.com','_blank');" – Concinnate

@Shoulders correct, according to specs: "The missing value default is the Submit Button state." – Fescue

but user cannot right click open in new tab, for that to work , u need the anchor tag – Schatz

@Shoulders how to specify type="button"? I mean what object do you use? (input) ? – Furred

@RehanMehdi This was a long time ago. I guess I was saying <input type="button" or something. – Shoulders

Please don't do this. It breaks so many things such as the right-click context menu for links. – Tweeze

Note that the "location.href" part is simply JS. It resets the "window" object to have a new location with an href of whatever. Thus you could use other JS commands here as well, for instance, if you wanted to open the link in a new tab, you could use: <button type="button" onclick="window.open('https://....', '_blank');">. – Sibeal

type=button does not seem to be relevant any more. – Lamont

This is the key. Adding type="button" was the key for me. – Trigonous

Answer 3

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:

Tonometer

Seems a little overkill for styling a single button, no? With border, padding, background, and other CSS effects you can style buttons and links to look similar without bringing over an entire framework. The methodology Bootstrap uses is good, however using Bootstrap seems excessive. – Hueyhuff

Answer 4

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.

Abercromby

This markup seems valid at this point, according to the HTML spec: w3c.github.io/html-reference/a.html#a-changes – Ossicle

Answer 5

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

Flaring

Just to complete information: formaction is compatible since "IE world" since version 10 and above – Quadrillion

@LucaDetomi - That is correct, however it is HTML5 specific. I've added another link with support data. – Flaring

@Flaring Genuinely curious. In the examples you and I have provided is there supposed to be an appreciable difference between the behavior of those two forms? In this specific case does <button formaction> === <form action>? – Giulia

@Giulia - The difference is that your answer relies on Javascript in order to work. In this solution, no Javascript is needed, it's straight HTML. – Flaring

@Flaring Sorry, I should have been more clear. Obviously the JS makes mine different but it is just a progressive enhancement. The form still goes to that link without the JS. I was curious about the intended behavior of just the HTML <form>s in each of our examples. Is formaction on a button supposed to add the ? to an empty GET submission? In this JSBin it looks like the HTML behaves exactly the same for both. – Giulia

If you want to open the uri in a new tab, you should add formtarget="_blank" to the button. – Terranceterrane

Its useful to note that this only works when wrapped by form tags. Found that out the hard way... – Cockneyfy

@Cockneyfy - Yeah unfortunately, that's why I put them there. I did add some additional information to the answer that specifies that. – Flaring

Just to let readers know: this DOES work in IE11, when using html5 and an enclosing form tag. – Peremptory

unfortunately, doesn't work when formaction='#anchor'. – Fetid

Interesting fact: You can have multiple buttons (and multiple urls) inside the form tags :) – Baldridge

This seemed really slick, but as someone mentioned it seems to add a ? to the target URL upon navigation. I abandoned it and went back to <a> links styled as buttons. – Projector

Isn't this a POST request and not a GET? That's a potential gotcha for people – Rutabaga

Answer 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="_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.

Roll

While this works, it should not be considered as a solution but a workaround because if you pass this code through W3C validator, you will get errors. – Unbend

Yes, Hyder B. you're right, but one you also should keep in mind that the standards are only raw guides. As a programmer you should always think outside the box and try things that are not in the book ;) . – Roll

NEVER wrap other anchors or form-action elements into Anchor. – Nyala

You should use <button type="button">... so that it doesn't by default function as a Submit – Storied

There's a very good reason this is not valid code: Accessibility. Tab stops (e.g. links) should not contain tab stops (e.g. buttons) because Assistive Tech (screen readers etc.) do not know how to present them to the user. Ask yourself: Which one gets keyboard focus via tabbing? Which one is supposed to handle the click event? So, besides failing the HTML validator, you'll also violate WCAG, which can have legal consequences - a box which it is wiser not to think too far outside of. – Monto

A <button> isn’t allowed inside an <a>. See the interactive content category. Dishonoring standards isn’t “thinking outside the box”, it’s violating established protocols; the specification isn’t a “raw guide”. – Macrocosm

Ohh boy, my bad. I didn't realise I was .... violating ... something ! Start thinking people, don't take everything as it is. The words "standard" and "protocol" represents things completely different. Anyway, if someone "dared" to use this as a solution or not, is there choice. – Roll

It is not really a solution, for example you can disable button, apply proper styling to such condition. Disabled is not a state for anchor. – Muenster

Answer 7

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>

Haslet

Only if you want it to reset your form. Use type="button" – Storied

the only issue with this is inline JS is considered bad form and sometimes violates CSP's – Sirkin

Answer 8

<form>
    <input type="button" value="Home Page" onclick="window.location.href='http://www.wherever.com'"> 
</form>

Circumambient

@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. – Methenamine

@Pekka: yup, and also it's not even well-formed xhtml – Wold

if using form just use a submit, if using onclick why bother with the form. -1 – Mullinax

It is not well-formed HTML. The tag input does not have an ending tag. – Thimerosal

@PeterMortensen According to the HTML spec, the input element is a void element. It must have a start tag but must not have an end tag. – Circumambient

Answer 9

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/

Andriette

I'm not sure why this hasn't got more upvotes, to be honest. It works exactly as I need, and I did it this way because I wanted search engine spiders to be able to spot and follow the link. With JS that probably wouldn't have happened, and I'm not too sure of search engine behaviour when it comes to forms. It also doesn't result in any layout or behavioural side-effects (although I did assign a class to the anchor and set the text-decoration for that class to none). – Dermatitis

No, you can't. HTML forbids nesting <button> inside <a>. – Altman

This is essentially the same as this answer from years earlier. – Altman

If it forbids it then why does it work? :) No serious developer takes heed to everything W3C validator says...try passing Facebook or Google or any huge website through there...The web isn't waiting for anyone – Andriette

@UriahsVictor It may work today, but one day browser vendors may decide to change the behavior as it isn't valid. – Litigious

@JacobAlvarez browser maintainers know better. This isn't something uncommon, they wouldn't want to go down as the browser which broke the internet. – Andriette

@UriahsVictor Flash and Java applets were pretty common too. – Litigious

FYI HTML also forbids the opposite (according to VS2015): nesting <a> inside <button> but that also works on: IE11, Edge, Firefox, Chrome and Safari and some/all mobile browsers. – Jabber

The HTML spec does not forbid this now: w3c.github.io/html-reference/a.html#a-changes – Ossicle

Answer 10

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:

1. This is a real button, and semantically it makes sense.
2. 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).
3. No JavaScript, no complex style required.

Cons:

1. 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.
2. Adds extra <form> element
3. 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:

1. Simple (for basic requirement) and keep semantic while not requiring an extra form.
2. 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:

1. 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:

1. Simple (for basic requirement) and good cross-browser support.
2. Does not need a <form> to work.
3. Does not need JavaScript to work.

Cons:

1. Semantic is sort of broken, because you want a button that acts like a link and not a link that acts like a button.
2. 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.

Knotgrass

Answer 11

Seven ways to do that:

1. Using window.location.href = 'URL'
2. Using window.location.replace('URL')
3. Using window.location = 'URL'
4. Using window.open('URL')
5. Using window.location.assign('URL')
6. Using HTML form
7. 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>

Deciliter

Right answer! Simple 1-liner that works. Just use 1 of the onclick= options. HTML anchor tag isn't valid, suggest taking it out. – Cartridge

Answer 12

Just place your button inside of a reference tag, e.g.,

<a href="https://www.google.com/"><button>Next</button></a>

This seems to work perfectly for me and does not add any %20 tags to the link, just how you want it. I have used a link to Google to demonstrate.

You could of course wrap this in a form tag, but it is not necessary.

When linking another local file, just put it in the same folder and add the file name as the reference. Or specify the location of the file if in is not in the same folder.

<a href="myOtherFile"><button>Next</button></a>

This does not add any character onto the end of the URL either, however it does have the files project path as the URL before ending with the name of the file. e.g

If my project structure was...

.. denotes a folder \

• denotes a file
  while four | denote a sub directory or file in parent folder

..public
|||| ..html
|||| |||| -main.html
|||| |||| -secondary.html

If I open 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.

Nucleolus

Answer 13

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).

2. 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.

3. 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.

4. Sometimes when you embed an <a> within a div, only the text is clickable, this setup makes the whole button clickable.

5. 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.

6. 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.

Glaydsglaze

You actually get a reasonable button without any CSS at all – Marishamariska

Answer 14

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.

Cammi

Answer 15

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.

Methenamine

I think he is talking about not only functionality (click) but also appearance. – Undervest

@Web Logic yup, that's why I'm talking about styling the link to look like a button. – Methenamine

@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. – Methenamine

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. – Hudgins

Answer 16

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>

Interlude

Answer 17

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.

Keep in mind the spec says this is not valid as buttons should not contain any interactive descendants.

Zany

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 – Zany

Both of you are correct. VS2015 flags this with a warning: "Element 'a' cannot be nested inside element 'button'" but it works with: IE11, Edge, Chrome, Firefox, Safari and at least some (perhaps all) mobile browsers currently. So don't use this technique but if you did in the past, it works for now ;) – Jabber

Can you address the alleged failure to pass HTML validation in your answer? Please respond by changing your answer, not here in comments (without "Edit:", "Update:", or similar - the answer should appear as if it was written today). – Thimerosal

Answer 18

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;
}

Cralg

Answer 19

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:

1. 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.
2. This solution works without JavaScript enabled. The fallback will add a ? to the end of the URL though.
3. 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.
4. 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.
5. 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="https://mcmap.net/q/40469/-how-do-i-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>

Giulia

Answer 20

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;  }

<a href="https://example.com" class="abutton">Continue</a>

Allometry

Styling an <a> to look like a button doesn't make it function like a button, as is being requested for accessibility purposes. Example would be keyboard navigation - links are triggered with the enter key, buttons are triggered by space bar. If a link looks like a button, a keyboard navigator would expect to use the space bar to trigger it and find it that doesn't work because it's secretly a link. – Nozzle

SvenskiNavi - I understand what do you mean - thank for that info. However I understand OP question that he actually want to get LINK which only looks like button (he write: "button that acts like a link" - so in my opinion he want to trigger it by enter key - not space bar - to preserve link behaviour) – Edmonson

Answer 21

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

Redbird

Set the button type="button", that will allow you to click it without submitting the form. – Bedpost

Answer 22

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>

Obfuscate

Answer 23

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>

Binder

Doesn't validate. Pasting into validator.w3.org/nu/#textarea gives Error: The element input must not appear as a descendant of the a element. – Zygosis

Answer 24

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.

Taeniacide

Answer 25

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" />
  <a href="www.target.com"><button type="button">Go to Target!</button></a>
  <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.

Strader

Element 'button' cannot be nested within element 'a'. – Runofthemill

according to the standard no, But in my experience this works fine though. Haven't cross-browser tested it extensively yet, but at least FF and Chrome seem to handle it just fine, with expected behaviour. – Strader

Arius: Read up a bit, experimented some more, and found that a button element can in fact be nested inside a <a> element, as long as the button element does not have its own action applied (since that would obviously result in a conflict - which action will the browser perform? the buttons or the <a>'s ?) but as long as you make sure the button-element itself doesn't trigger any action once clicked,this should work just fine (probably shouldn't be considered a best practice though) – Strader

It's not about possibility. This is just against HTML5 specification and that's all. – Runofthemill

Does this work with current (2021) browsers? – Thimerosal

@PeterMortense I haven't got a clue to be honest, I'm not doing much frontend work these days. shouldn't be too hard to find out though, just make a html document and try! :) – Strader

Answer 26

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.

Clop

Answer 27

The Bootstrap approach also works with Bulma.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
<a href="https://www.stackoverflow.com" class="button is-primary">Stack Overflow</a>

Boreal

<a href="#" class="btn btn-primary" role="button">Bootstrap</a> – Mittel

Answer 28

In JavaScript

setLocation(base: string) {
  window.location.href = base;
}

In HTML

<button onclick="setLocation('/<whatever>')>GO</button>"

Gay

Answer 29

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://mcmap.net/q/40469/-how-do-i-create-an-html-button-that-acts-like-a-link 
   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>

Daladier

Answer 30

HTML Answer: If you want to create an HTML button that acts like a link, use the two common attributes for it: <a> and/or action="":

<form action="stackoverflow.com"/>
   <button type="submit" value="Submit Form"

Or...

"href" is part of the <a> attribute. It helps direct links:

<a href="stackoverflow.com">Href</a>

Giesser

Answer 31

none of the solutions here worked for me, so after trying all of them out I ended up with something trivial: HTML only (no form submit), no CSS, no JS:

<a href="/link"><button>Link</button></a>

Albano

This will create an A11Y issue because then you need to tab twice with keyboard navigation. – Rambutan

Answer 32

If you are using an SSL certificate:

<a href="https://www.google.com" target="_blank"><button>Click me !</button></a>

Certainly

Why is it different using an SSL certificate? – Thimerosal

Answer 33

If you're using a CSS library or a theme, just apply the classes of a button to the anchor/link tag.

Below is an example with One UI:

<a class="btn-block-option" href="">
    <i class="si si-reload"></i>
</a>

Tacnode

Answer 34

You can simply do this

 <div><a href="yourUrl" class="styleToLookLikeButton">buttonText</a></div>

Benedictus

Answer 35

A simple solution to this answer is to programmatically create an a tag and click it in response to the button click.

Define a function you will call from your button's click handler.

<script>
  function simulateAnchorClick(href) {
    const a = document.createElement('a');
    a.href = href;
    a.click();
  }
</script>

In your HTML, call the function.

<button onclick="simulateAnchorClick('https://stackoverflow.com')">Click Me</button>

This is a much better solution than:

1. Trying to use CSS to style an a element like a button.
2. Using a form to submit.
3. Setting document.location.href

Why? Because you do not have to worry about getting the style to match. You can control all of the link attributes, such as target, noreferer, etc.

Finally, although document.location.href changes the URL, it will not necessarily "act like a link" in regards to site policies. The provided snippet shows this distinction.

function simulateAnchorClick(href) {
    const a = document.createElement('a');
    a.href = href;
    a.click();
 }

<button onclick="simulateAnchorClick('https://stackoverflow.com')">
  Click Me
</button>

Lidstone

Answer 36

If what you need is that it will look like a button, with emphasis on the gradient image, you can do this:

<a href="www.yourlink.com" class="btn btn-gradient"><i class="fa fa-home"> Button Text</i></a>

Enscroll

You'll need some kind of https:// or http:// before the URL though. You can also link to local files using file:/// – Truant

This assumes both Bootstrap and FontAwesome, neither of which are mentioned in the question. – Barrault

Answer 37

If you want to create a button that acts as a link, there are multiple ways you can do this. Choose the one best for your situation. The code below creates a link inside a button.

<button>
  <a href="www.google.com">Go to Google</a>
</button>

The second way is to open a new window when the button is clicked

<button onclick="open('www.google.com')">Google</button>

Or maybe add event listeners

document.querySelector("#btn").addEventListener('click', open('www.google.com'))

<button id="btn">Go to Google</button>

There are many ways you can do this, but this is only three small examples of buttons that act like a link. In other words, buttons that open up links.

Preliminary

How is this different from previous answers (not a rhetorical question)? – Thimerosal