elulle elulle - 21 days ago 5
HTML Question

<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)

Answer

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.