I see a border around the button on the HTML page. I'm trying to make one button blue and one green and place them on a table. code show as below:
<table align="center"> <tr style=" font-family: verdana; font-size: 24px;"> <th> Select your Region </th> </tr> <tr> </tr> <tr> </tr> <tr> </tr> <tr> </tr> <tr> <td align="center"> <button> <a id="cust" type="button" style= "background-color: #00824A; border: none; color: white; padding: 16px 55px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; transition-duration: 0.4s; cursor: pointer; font-weight: bold; font-family: verdana" href="URL"> US </a> </button> </td> </tr> <tr> </tr> <tr> </tr> <tr> </tr> <tr> </tr> <tr> <td align="center"> <button> <a id="cust" type="button" style= "background-color: #0061D5; border: none; color: white; padding: 16px 55px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; transition-duration: 0.4s; cursor: pointer; font-weight: bold; font-family: verdana" href="URL"> EU </a> </button> </td> </tr> </table>
This is how they appear on the web page:
I want the entire button to be that color with no gray around it. I removed the "border" with border: none in the style. Instead, it displays a color rectangle inside a larger gray button.
The
border is the
and remove the default borderbutton
element itself, not the linkwithin it. You need to style the button using
Related reading: https://css-tricks.com/overriding-default-button style/