HTML Email - button has no padding on outlook - html

Question

I was wondering if it is possible to do the border with the same padding as the button above. The solution might seem like it is when I add the border to the td but I can not do that because in other client the border has border-radius which is not visible here. Any ideas? Thanks
code for the second button:
<!-- BUTTON -->
<table bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" class="fluid"
role="presentation" width="600">
<tr>
<td align="center" bgcolor="#ffffff" style="padding: 0 0 40px 0;"
valign="top">
<table align="center" border="0" cellpadding="0" cellspacing="0"
class="main-button-mob-width" role="presentation"
style="max-width: 80%; min-width: auto;">
<tr>
<td align="center" bgcolor="#ffffff"
class="out-main-button-padding"
style="border-radius: 50px; padding: 0; font-family:
'Arial Black', Gadget, Arial,
Helvetica, sans-serif; font-size: 18px; font-weight: bold;
line-height: 22px; mso-text-raise: 4px;"
valign="top">
<a class="out-main-button-a"
href="#" style="display: block;
border-radius: 50px; background-color: #ffffff;
border: 3px solid #061539;
mso-border-alt: 8px solid #061539;
padding: 15px 35px 15px 35px; mso-padding-alt: 4px;
color: #061539; text-decoration: none;"
target="_blank" title="">
<span style="color: #061539; text-decoration: none;
background-color: #ffffff">INVITA A TUS AMIGOS
</span>
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- BUTTON end -->

Answer 1

In Outlook you cannot change an inline element such as <a> to a block element (display:block). So it ignores padding, margins and such because these are block element styles.
Therefore, for cross-email compatibility, you either need to put padding on the <td> (which doesn't extend the clickable part, but only makes it look like the button is bigger, or, you can apply a hack as described by Mark Robbins.
Solution 1: (Easiest) TD button
<td align="center" bgcolor="#ffffff"
class="out-main-button-padding"
style="border-radius: 50px; padding: 15px 35px 15px 35px;
border-radius: 50px; background-color: #ffffff;
border: 3px solid #061539;
mso-border-alt: 8px solid #061539;
mso-padding-alt: 4px; font-family:
NIVEaBrandType-Bold, 'Arial Black', Gadget, Arial,
Helvetica, sans-serif; font-size: 18px; font-weight: bold;
line-height: 22px; mso-text-raise: 4px;"
valign="top">
<a class="out-main-button-a"
href="https://nivea.com" style="display: block;
color: #061539; text-decoration: none;"
target="_blank" title="">
<span style="color: #061539; text-decoration: none;
background-color: #ffffff">INVITA A TUS AMIGOS
</span>
</a>
</td>
All I've done is move the block-level styles from the <a> to the <td>. You can still leave the display:block on the <a> to make the clickable area bigger for those email clients that support this.
Solution 2: Mark Robbin's A button
<a href="https://example.com/" style="background: #333; border: 2px solid #f00; text-decoration: none; padding: 15px 25px; color: #fff; border-radius: 4px; display:inline-block; mso-padding-alt:0;text-underline-color:#333"><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%;mso-text-raise:30pt" hidden> </i><![endif]--><span style="mso-text-raise:15pt;">Link Text</span><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%" hidden> </i><![endif]-->
</a>
Change the left and right padding by changing the letter-spacing value (on the left and right of the link text).
Change the bottom padding by changing the mso-text-raise value in the <span>.
Change the top padding by changing the mso-text-raise value in the <i>.
(Detailed explanation on https://www.goodemailcode.com/email-code/link-button)