CODEWITHSUNDEEP
outlookhtml-email
user1937021
user1937021

Reputation: 10801

padding not respected in outlook on button

I have an anchor link with padding:

<a href="http://my.cris.dev:3008/services/3/viewer" style="text-decoration:none; background-color:#137191; color:#fff; display:block; padding:16px 16px 16px; font:100 16px/16px &quot;Cabin&quot;,Arial, Helvetica, sans-serif; letter-spacing:0.025em; border-radius:4px;">Discover your 3D</a>

But outlook doesn't respect this padding, it's just removed, what's the best solution to not mess up the design in other clients.

Upvotes: 4

Views: 13954

Answers (3)

bug5layer
bug5layer

Reputation: 239

I got button code example from microsoft template:

    <tr>
    <td style="padding: 0px 0px 40px;">

        <table align="center" border="0" cellspacing="0" cellpadding="0">
            <tbody>
                <tr>
                    <td align="center" style="padding-bottom: 0px !important; margin-bottom: 0px !important;" cellspacing="0" border="0" cellpadding="0">
                        <a class="fixLinkWhite" style='text-align: center; color: rgb(255, 255, 255); line-height: 19px; font-family: "Segoe UI Semibold", wf_segoe-ui_semibold, "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif; font-size: 16px; font-weight: 500; display: inline-block;' href="https://emea01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fclick.mail.onedrive.com%2F%3Fqs%3D66fc70d9e5f1a53dc4a2197021906f0dbfd56c5f6063855eacb5b2236fdb95cce118e2452e0763745ec595025acd785afd06ff9ac40a30e8&amp;data=04%7C01%7C%7C1da4d1818b194c2ce45508d9b586e09f%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637740413170283041%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&amp;sdata=P48lMVNNmii3puOCtHjGAGqjBauzZvUfKua%2F0hsS2Z0%3D&amp;reserved=0" target="_blank" shash="lVj7xGxKkteyQkNqUIWVOtfqS5bLgunSFQJWPeQ+a+jLeZJ0lydeWcm1fiSFwJLd6OvwJNV2YVATqaHA5r9xyo2q+4/ssBdAEfVO93OqZLe1Ol46wxjFEMaqebYBsJUqECxQiHgCvIo9cZ9OSacRvZS6y6UiyPLq3xDoiAJGDzc=" originalsrc="https://click.mail.onedrive.com/?qs=66fc70d9e5f1a53dc4a2197021906f0dbfd56c5f6063855eacb5b2236fdb95cce118e2452e0763745ec595025acd785afd06ff9ac40a30e8">
                            <p class="fixLinkWhite" style="padding: 10px 0px; border: 1px solid rgb(0, 120, 215); border-image: none; color: rgb(255, 255, 255); line-height: 19px; font-size: 16px; font-weight: 500; display: inline-block; background-color: rgb(0, 120, 215);">&nbsp;&nbsp;&nbsp; Перейти в ваш OneDrive &nbsp;&nbsp;&nbsp;</p>
                        </a>
                    </td>
                </tr>
            </tbody>
        </table>

    </td>
</tr>

Upvotes: 0

Baz
Baz

Reputation: 71

For some reason padding on the a-tag in Outlook only works when you combine with a 1px border and display inline-block. Then you need the td to share the same background-color and width as the button to fill out the clickable area. 

<table align="center">
    <tbody>
        <tr>
            <td style="background-color: #0079c8;" width="140px"><a href="#" style="display: inline-block; color: #fff;  background-color: #0079c8; width: 125px; border: 1px solid #0079c8; padding: 15px 10px; text-align: center;  vertical-align:middle; text-decoration:none;">Log in&nbsp; &gt;</a></td>
        </tr>
    </tbody>
</table>

Upvotes: 7

Ted Goas
Ted Goas

Reputation: 7587

Outlook's support for the box model is... sketchy. Try this code:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td>
            <table border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td bgcolor="#137191" style="padding: 16px; border-radius:4px">
                        <a href="http://my.cris.dev:3008/services/3/viewer" target="_blank" style="font-size: 16px; mso-line-height-rule:exactly; line-height: 16px; font-family: 'Cabin',Arial, Helvetica, sans-serif; font-weight: 100; letter-spacing:0.025em; color: #ffffff; text-decoration: none; display: inline-block;">Discover your 3D</a>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

This will solve your collapsing padding issue in Outlook. Outlook will still display squared-off corners instead of border-radius, but at least you'll get a padded button that is clickable.

(I added/edited a few other properties to help cross-client display)

There are a few way to achieve bulletproof buttons in email if you prefer another method.

Upvotes: 9

Related Questions