Link inside a button not working in Firefox

Question

I have two links inside a button, but the links do not seem to work on Firefox.

<button class="btn login"> <a href="/login"><b>Log In</b></a> | <a href="/signup"><b>Sign Up</b></a> </button> 

I tried onclick JavaScript and redirect - even this does not work.

Answer 1

This does not work because it is forbidden by HTML5 :

Content Model: Phrasing content, but there should not be an interactive descendant of content.

Interactive content means any of the following elements :

audio (if a control attribute is present), information about the button insert iframe img (if the usemap attribute is present) input (if the attribute type is not in a hidden state). Shortcut menu (if attribute type is in toolbar state) (if usemap present attribute) select textarea video (if control attribute is present)

If it works in some browsers, it is simply because they try to play well with incorrect markup and provide some kind of meaningful result.

In other words: rewrite your HTML, this is a mess. If you want the links to look like they are in the same button, put them in a div element and style that will look like one, instead of overusing semantically incorrect elements for it.

Answer 2

<a> not allowed inside <button>

The content of phrases, but there should not be a streaming descendant for interactive content.

<a> - interactive content (regardless of whether it has href , apparently, but yours). That way, you cannot depend on whether there are links as children of the button and what makes Firefox right. Use another element to contain <a> s

Answer 3

I have two links inside the button, but [...]

"Yes, but let me stop you right there ..."

http://www.w3.org/TR/html5/forms.html#the-button-element :

4.10.8 Button element. Content Model: The content of phrases, but there should be no streaming descendant .

--->

Interactive content is content specifically designed for user interaction. ⇒ a, audio [...]

So, if you write invalid HTML, expect unexpected behavior; -)

Answer 4

You can add this to the button element.

OnClick = "window.location.href = '/ link1'"

Example

<button onclick="window.location.href='/login'">Login</button>

Answer 5

This is invalid HTML,

Do something like this:

 <ul> <li><a href="#">Log in</a></li> <li><a href="#">Sign up</a></li> </ul> 

Answer 6

Use javascript: window.location for the button.

 <div class="product"> <button onClick="javascript: window.location='/checkout/outfield- banner/1'">Add to Cart</button> </div> 

Answer 7

Or you can put the button inside the anchor, it will not have the same look, since it will be two different buttons, but it will be a button that acts as a link. This is not technically correct yet, but it works in FireFox.

 <a href="/login"> <button class="btn login"> <b>Log In</b> </button> </a> <a href="/signup"> <button class="btn login"> <b>Sign Up</b> </button> </a>