brando brando - 1 month ago 14
CSS Question

Outlook 2016 button image displays wrong

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

Answer

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>