I am seeing a border around my buttons on an HTML webpage. I am trying to make one button blue and one green and they are placed in a table. Code 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 are showing up on the webpage:
I was expecting the whole button to be that color without the grey around the sides of it. I removed the "border" with border: none in the styles. Instead, it shows a rectangle of the color within the larger grey button.
<button>element or<a>element, but not one inside of the other. That will cause some accessibility issues because of their differing purposes. A<button>is meant to be used to interact with the page (like submitting a form or opening a dialog), and an<a>element is meant to be a link.