Outlook 2016 button image displays wrong

Question

I'm working on an eblast and am having trouble getting my CTA button to render correctly on Outlook 2016.

The bulletproof button from Campaign Monitor isn't working on Outlook 2016, so I decided to conditionally insert an image button for only Outlook 2016.

The problem is that the image doesn't show rounded corners. I'm not sure why because when I insert the image elsewhere in the email, the rounded corners display without issue. Please advise.

<!--[if mso 16]>
<a href="www.google.com" style="background-
color:#021e2f;border:1px solid #1e3650;color:#ffffff;display:inline-
block;font-family:sans-serif;font-size:16px;font-weight:bold;line-
height:40px;text-align:center;text-decoration:none;width:130px;-webkit-text-
size-adjust:none;"><img width="130" src="https://mlsvc01-
prod.s3.amazonaws.com/6f8ceec6001/0d1f837c-7eb0-4f1c-b8dd-560515a505bf.png?ver=1477579088000" alt="Learn more" style="font-family:sans-serif;font-
size:16px;font-weight:bold;line-height:40px;text-
align:center;width:130px;height: auto;" /></a></div>

<![endif]-->

what rounded corners? there's no border rounding anywhere in there. — Marc B, Oct 27 '16 at 15:13
Thanks for the reply! The src of the image tag links to an image with rounded corners. The image is a PNG. — brando, Oct 27 '16 at 15:19
I think the border: 1px solid #1e3650; is the culprit here. :). remove that and it looks good. — Nasir T, Oct 27 '16 at 15:26

score 1 · Accepted Answer · answered Oct 27 '16 at 15:25

If you're using an image for a button, you shouldn't need some of the CSS included in the enclosing <a href>. Things like border and background-color could be impacting the <img> if its corners are transparent.

Try:

<a href="www.google.com" style="display:inline-block;line-height:40px;text-align:center;width:130px;">
    <img width="130" src="https://mlsvc01-prod.s3.amazonaws.com/6f8ceec6001/0d1f837c-7eb0-4f1c-b8dd-560515a505bf.png?ver=1477579088000" alt="Learn more" style="font-family:sans-serif;font-size:16px;font-weight:bold;line-height:40px;text-align:center;width:130px;height: auto;" />
</a>

The border was causing the issue. Thank you so much! – brando Oct 27 '16 at 15:28 — brando, Oct 27 '16 at 15:28

Outlook 2016 button image displays wrong

1 Answers1