如何去除HTML表格中按钮的灰色边框？

你看到的灰色边框是外层<button>元素的默认样式，仅给内部<a>标签设置border:none无法消除——因为<button>本身自带默认边框、内边距和背景样式。另外，HTML规范不允许在<button>内部嵌套<a>这类交互式元素，这会带来语义和交互上的潜在问题，更推荐直接将<a>样式化为按钮。

方案1：移除，直接样式化（推荐） #

直接删掉外层的<button>标签，把样式统一应用在<a>上，既符合规范又能达到预期效果：

<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">
      <a id="cust-us" 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;
                border-radius: 0;"
         href="URL">
        US
      </a>
    </td>
  </tr>
  <tr></tr>
  <tr></tr>
  <tr></tr>
  <tr></tr>
  <tr>
    <td align="center">
      <a id="cust-eu" 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;
                border-radius: 0;"
         href="URL">
        EU
      </a>
    </td>
  </tr>
</table>

注：将重复的id="cust"改为唯一的cust-us和cust-eu，避免ID冲突。

方案2：保留并重置其默认样式 #

如果一定要保留<button>标签，需要给它设置样式消除默认边框和背景，让它完全贴合内部的<a>：

<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 style="border: none; background: none; padding: 0;">
            <a id="cust-us" 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 style="border: none; background: none; padding: 0;">
            <a id="cust-eu" 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>

内容的提问来源于stack exchange，提问作者Kaitlyn Wright