Nesting inside <button> doesn't work

Question

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?

Answer 1

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>

Answer 2

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>

Answer 3

Probably better to just do this:

<a href="#" class="btn">Go!</a>

Answer 4

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.

Answer 5

Try to change button to span. That works for me.

Answer 6

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>