'Same CSS, different outcomes for <a> and <button>

I have a table that serves as the header of my page which contains 2 buttons.

By using only an < a href=""> tag for the add button, applying the same css styles to both buttons yielded different results.

My idea of fixing this was to wrap < button > tags in < a > tags so that the css styling would be the same, but the add button would still behave as a clickable link.

<table>
  <tr>
    <td class="title"><h1>Product List</h1></td> 
      
      <td class="add-product-btn">
        <a href="https://google.com"><button>ADD</button></a>
      </td>

      <td class="delete-product-btn">
        <button> MASS DELETE </button>
      </td>

  </tr>   
</table>
htmlcssbutton


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions