Menu
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?
605
Using button tag inside <a> tag: This method create a button inside anchor tag. The anchor tag redirect the web page into the given location. Adding styles as button to a link: This method create a simple anchor tag link and then apply some CSS property to makes it like a button.
Inside a <button> element you can put text (and tags like <i> , <b> , <strong> , <br> , <img> , etc.). That is not possible with a button created with the <input> element! Tip: Always specify the type attribute for a <button> element, to tell browsers what type of button it is.
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.
No, you can't. HTML forbids nesting <button> inside <a> .
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>
Probably better to just do this:
<a href="#" class="btn">Go!</a>
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.
3
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
