Button looks squashed on email client

Question

I am using the following code to create a button:

    <table width="100%" cellspacing="0" cellpadding="0">
    <tr>
        <td>
            <table cellspacing="0" cellpadding="0">
                <tr>
                    <td style="border-radius: 2px;" bgcolor="#1AB394">
                        <a href="https://www.example.com" target="_blank" style="padding: 8px 12px; border: none; border-radius: 4px; font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #ffffff; text-decoration: none; font-weight: normal; display: inline-block;">
                            CONFIRM ACCOUNT             
                        </a>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
  </table>

The button is used in emails. When I send the email, the button looks fine on the web mail clients:

But doesn't look right on some other mail clients such as Outlook:

Can someone please help? Thanks.

score 1 · Accepted Answer · answered Jun 11 '19 at 03:30

You might want to take a look at this:

outlook-rendering-issues

Item #3.

I cannot test any of that because I do not use outlook as a client, but they seem to suggest that you might have to style the td enclosing the a tag more than you have. It does almost look like it is not treating the a tag as an inline-block like you have in your style. If you add the:

padding: 8px 12px;

to the enclosing td that might fix the appearance of the button.

Button looks squashed on email client

1 Answers1