Link Inside a Button Not Working in Firefox

Link inside a button not working in Firefox

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.

Clickable div inside a button doesn't work on firefox

In Firefox, the button itself steals events like mouse events and click of the child element. This means things inside buttons cannot be clicked. It is not considered a bug because it works exactly as designed.

Source

Please visit this also

Based on the above links the solution for Firefox is to change the button to some other element like div and manage the functionality and design accordingly.

Nesting <a> inside <button> doesn't work in Firefox

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>

Button link doesn't work in Firefox, IE

The HMTL syntax does not allow an a element within a button element, so it is not surprising that it does not work across browsers. There should be no reason to use such a construct, since you can either style a link to look like a button or associate an action with a button, depending on what you wish to accomplish.

Why Firexfox and IE cannot open a link (anchor) inside a <button></button> tag.

It'not allowed to have link inside a button, according to HTML5 specifications

HTML5 reference from W3

Content model: Phrasing content, but there must be no interactive
content descendant.

a is interactive content descendant

Interactive content description

Links not active in firefox with bootstrap buttons

Instead of,

<button class="btn pull-right" role="button">
<a href="http://domain.dev/?cat=4" name="View all News">
    All News
</a>
</button>

You have to use,

<a href="http://domain.dev/?cat=4" name="View all News">
  <button class="btn pull-right" role="button">
    All News
  </button>
</a>

Or,

<a href="http://domain.dev/?cat=4" title="View all News" class="btn pull-right">
    All News
</a>

HTML a href link with button not work in firefox but work google chrome why is it?

Because it's not valid: http://www.w3.org/TR/2011/WD-html5-20110525/the-button-element.html - an <a> element is an "interactive element", which is not allowed: http://www.w3.org/TR/2011/WD-html5-20110525/content-models.html#interactive-content.

Button with a link works in Firefox but not Chrome or Safari

try this Demo
CSS

.btn
{
    background-color: rgb(7, 55, 99);
    color: white;
    border: none;
    cursor: pointer;
    padding: 2px 12px 3px 12px;
    text-decoration: none;

}

HTML

<center><a href="video.html" class="btn">Create</a></center>

---

Related Topics