Search code examples
htmlemailbuttonhtml-email

HTML Email - button has no padding on outlook

enter image description here

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 -->

Solution

  • 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>&nbsp;</i><![endif]--><span style="mso-text-raise:15pt;">Link Text</span><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%" hidden>&nbsp;</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)