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?

6
  • 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, 2013 at 14:13
  • 3
    hahahahahah... why i didn't thought of that before :P , had been months coding like that :S
    – cjmling
    Apr 29, 2013 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, 2013 at 14:25
  • Except anchors aren't keyboard-navigable like buttons are.
    – 2540625
    Jan 24, 2017 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, 2017 at 19:24

7 Answers 7

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>
5
  • 4
    Right, but FYI - the first option breaks the styles when using a button group in bootstrap. :(
    – Mark
    Feb 24, 2014 at 16:33
  • @HussienK but why? Dec 1, 2016 at 15:06
  • 8
    Wrapping a button in an anchor fails both the WHATWG and W3C validators (html5.validator.nu and validator.w3.org).
    – 2540625
    Jan 24, 2017 at 19:23
  • Anchors alone aren't as fully keyboard-navigable as buttons are.
    – 2540625
    Jan 24, 2017 at 19:23
  • 4
    This seems to be breaking the rules. Buttons cannot be nested inside anchor tags. See: stackoverflow.com/questions/6393827/… Mar 25, 2019 at 13:48
22

Probably better to just do this:

<a href="#" class="btn">Go!</a>
1
  • 2
    Except anchors aren't as fully keyboard-navigable as buttons are.
    – 2540625
    Jan 24, 2017 at 19:25
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.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.