I have two links inside a button but the links don’t seem to work on Firefox.
<button class="btn login">
<a href="/login" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener"><b>Log In</b></a>
|
<a href="/signup" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener"><b>Sign Up</b></a>
</button>I tried JavaScript onclick and redirecting – even that is not working.
Answers:
Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.
Method 1
This doesn’t work because it is not allowed by HTML5:
Content model: Phrasing content, but there must be no interactive
content descendant.
Interactive content means any of the following elements:
a audio (if the controls attribute is present) button details embed
iframe img (if the usemap attribute is present) input (if the type
attribute is not in the hidden state) keygen label menu (if the type
attribute is in the toolbar state) object (if the usemap attribute is
present) select textarea video (if the controls attribute is present)
If it does work in some browsers it’s just because they’re trying to
play nice with malformed markup and provide some sort of meaningful result.
In other words: rewrite your HTML, it’s a mess. If you want the links to look like they’re in a button, put them in a div element and style that to look like one, instead of abusing semantically wrong elements for it.
Method 2
<a> is not allowed inside <button>
Phrasing content, but there must be no interactive content descendant.
<a> is interactive content (regardless of whether it has an href apparently, but yours do). Thus you can’t depend on having the links as children of the button and what Firefox is doing is correct. Use another element to contain the <a>s
Method 3
I have two links inside a button but […]
“Yeah, but let me stop you right there …”
http://www.w3.org/TR/html5/forms.html#the-button-element:
4.10.8 The button element Content model: Phrasing content, but there must be no interactive content descendant.
—>
Interactive content is content that is specifically intended for user interaction.
⇒ a, audio […]
So, if you are writing invalid HTML, expect unexpected behavior 😉
Method 4
You can add this in the button element.
onclick=”window.location.href=’/link1′”
Example
<button onclick="window.location.href='/login'">Login</button>
Method 5
That’s invalid HTML,
Do something like this instead:
<ul>
<li><a href="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">Log in</a></li>
<li><a href="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">Sign up</a></li>
</ul>Method 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>
Method 7
Or, you can put the button inside the anchor, it won’t have the exact same look since it’ll be two different buttons, but it will be a button that acts as a link. It’s still not technically correct but it does work in FireFox.
<a href="/login" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">
<button class="btn login">
<b>Log In</b>
</button>
</a>
<a href="/signup" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">
<button class="btn login">
<b>Sign Up</b>
</button>
</a>All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0