Search code examples
htmlfirefoxbuttonhrefmozilla

<button> working in chrome but not in Firefox - why?

I have a few buttons on my html page created like this: 

<button type="button" class="read-more"><a href="#">Read More</a></button>

they are responsive in chrome and Safari - they work perfectly fine. However when I tested them in mozzilla Firefox they do not respond at all. Does anyone know what the issue could be?

I tried doing them like this : 

<a href="#"> <button type="button" class="read-more">Read more</button></a>

This links the button, but it does not show the clickable curser and does not pick up some of the css (e.g. the underline and the font color)

Solution

  • Your HTML is invalid. Use a validator. A button cannot contain an anchor and an anchor cannot contain a button. Different browsers recover from that error in different ways.

    • If you want to link somewhere, use an anchor.
    • If you want to submit a form, or have a control that does nothing but run some JavaScript, use a button.

    Then apply CSS to make it look the way you want.