CODEWITHSUNDEEP
javascripthtmlcss
Maxty
Maxty

Reputation: 9

How to apply link to entire button rather than just the text

Is there a way to assign the link to the whole button, so that it is easier to interact with instead of having to click on the text itself?

<table style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; mso-line-height-rule: exactly; border-collapse: collapse !important;" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#000000">
  <tbody>
    <tr>
      <td align="center" width="250px" style="padding: 20px 10px; width: 250px;">
        <a rel="noopener noreferrer" href="https://www.thermador.com/us/dealer-locator?cid=April21SSElead1v2|emai|en|noc|adhoc|thd|own|12468|engage|finddealer_cta" target="_blank" title="FIND DEALER" style="font-family: Avenir, Arial, san-serif; color: #ffffff; text-decoration: none; line-height: 14px; white-space: nowrap; font-size: 15px; font-weight: normal; letter-spacing: 3px;"
          data-sap-hpa-ceimo-link-id="202004221731488" data-sap-hpa-ceimo-link-outboundid=" " data-sap-hpa-ceimo-link-utm="X" data-sap-hpa-ceimo-link-trackable="X" data-sap-hpa-ceimo-link-type="Static">FIND DEALER</a>
      </td>
    </tr>
  </tbody>
</table>

Upvotes: 0

Views: 55

Answers (1)

Liftoff
Liftoff

Reputation: 25412

Simple. Just apply the sizing CSS to the <a> element instead and give it an inline-block display type since anchors are by default inline and will not render any padding.

a
{
  padding: 20px 10px;
  width: 250px;
  text-align: center;
  display: inline-block;
}
<table style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; mso-line-height-rule: exactly; border-collapse: collapse !important;" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#000000">
  <tbody>
    <tr>
      <td align="center"><a rel="noopener noreferrer" href="https://www.thermador.com/us/dealer-locator?cid=April21SSElead1v2|emai|en|noc|adhoc|thd|own|12468|engage|finddealer_cta" target="_blank" title="FIND DEALER" style="font-family: Avenir, Arial, san-serif; color: #ffffff; text-decoration: none; line-height: 14px; white-space: nowrap; font-size: 15px; font-weight: normal; letter-spacing: 3px;"
          data-sap-hpa-ceimo-link-id="202004221731488" data-sap-hpa-ceimo-link-outboundid=" " data-sap-hpa-ceimo-link-utm="X" data-sap-hpa-ceimo-link-trackable="X" data-sap-hpa-ceimo-link-type="Static">FIND DEALER</a></td>
    </tr>
  </tbody>
</table>

Upvotes: 2

Related Questions