62

I have a <button> with a hyperlink tag inside, looks like this:

<button class="btn"><a href="#"></a></button>

This works well in Chrome and Safari, BUT doesn't work in Firefox (ver 20 tested).

What's wrong?

cimmanon
  • 67,211
  • 17
  • 165
  • 171
cjmling
  • 6,896
  • 10
  • 43
  • 79
  • 5
    Why would you have the code like that? Having an anchor inside a button tag is not correct HTML afaik. It would seem better to simply style the anchor tag to look like the button style you want and get rid of the button tag altogether. – Billy Moat Apr 29 '13 at 14:13
  • 3
    hahahahahah... why i didn't thought of that before :P , had been months coding like that :S – cjmling Apr 29 '13 at 14:24
  • 4
    yeah, Bootstrap is quite happy to accept all of the "btn" classes on anchor tags as I've shown in my answer below :) – Billy Moat Apr 29 '13 at 14:25
  • Except anchors aren't keyboard-navigable like buttons are. – 2540625 Jan 24 '17 at 19:21
  • 2
    Wrapping a button around an anchor fails both the WHATWG and W3C validators (html5.validator.nu and validator.w3.org). – 2540625 Jan 24 '17 at 19:24
  • Possible duplicate of [Link inside a button not working in Firefox](http://stackoverflow.com/questions/17253410/link-inside-a-button-not-working-in-firefox) – 2540625 Jan 24 '17 at 19:37

7 Answers7

69

To make it work in all browser, Firefox too you have to change it to

<a href="#"><button class="btn"></button></a>

or as suggested by Billy Moat in case of bootstrap there was no need of <button> you could just do 

<a href="#" class="btn">GO</a>
cjmling
  • 6,896
  • 10
  • 43
  • 79
22

Probably better to just do this:

<a href="#" class="btn">Go!</a>
Billy Moat
  • 20,792
  • 7
  • 45
  • 37
3

This issue is happening in FF and IE(< 10). The browser simply doesn't like the tag button when it's used as a link.

Quick solution in bootstrap is to use and give a class of btn btn-default (or your choice of button style).

However, you can use in a form (submit button for instance) and you shouldn't have an issue.

ToTech
  • 169
  • 1
  • 6
0

You can simply use an onclick method instead of changing the HTML structure, if you can't change your structure because of something that doesn't allow you to change(e.g. bootstrap components as list-groups, that's my case hehe) and mainly if you want to put two or more links inside a button:

<button class="btn"><a onclick="location.replace('YOUR_URL_HERE')"></a></button>
gorkem
  • 731
  • 1
  • 10
  • 17
Matheus Montenegro
  • 9
  • 1
0

In case you are using wordpress wp_loginout function. This function create a link for login/logout to nest the link inside a button for styling eg: using btn btn-primary just replace the <button> tag it with a <span> tag

<span class="btn btn-primary"><?php wp_loginout($_SERVER["REQUEST_URI"] ); ?></span>
Merlin
  • 4,907
  • 2
  • 33
  • 51
0

Nesting an <a> tag inside a <button>, or vice versa, violates HTML rules and will not pass a code validator:

"The element <a> must not appear as a descendant of the <button> element."

If you want your button to behave like a link, or your link to look like a button, you can style your link to look like a button with CSS or Bootstrap, as shown by Billy Moat's answer,

OR

you can use location.href in the button tag:

<button onclick="location.href='http://www.example.com'" type="button"> www.example.com </button>

<button onclick="window.location.href='/css_page.html'">CSS page</button>
Konstantinos Gallis
  • 956
  • 6
  • 11
Michael S DuWors
  • 1
  • 3
-1

This worked for me to retain bookstrap btn-group stylings:

<button class="btn btn-default" onclick="location.replace('YOUR_URL_HERE')">Click Me</button>
Roger
  • 577
  • 6
  • 9