Create a Discussion

Bulletproof Buttons broken in Office 365 ProPlus?

Chris Sugg posted 2020-09-18 13:35:35

We have been using the Bulletproof Buttons method for adding buttons to emails, which uses VML to create the shape in Outlook (which enables curved edges and gradients) but which defaults to standard HTML for everything else.

https://buttons.cm/

In the past few weeks we've had feedback from recipients that in Office 365 ProPlus they're appearing with the text cut off:

Has anyone encountered the same issue?

Ian Repko replied 2020-11-12 19:00:08

I've seen the same issue. Anyone else?

Reply to Ian Repko

Chris Sugg replied 2020-11-12 20:56:32

I am absolutely convinced Microsoft have deliberately sabotaged their own email client to try and drive everyone to the web-based 365 or MS Teams.

Lee Borowiak replied 2020-11-18 03:37:00

Hi Chris,

I created a button which has worked great when testing in Litmus. Try this one:


<a href="https://litmus.com" style="font-family:Helvetica, Arial, sans-serif;font-weight:normal;font-size:14px;color:#ffffff;text-decoration:none;padding-top:10px;padding-bottom:10px;padding-left:20px;padding-right:20px;display:inline-block;width:auto;border-radius:20px;background-color: #999999;border: 2px solid #999999;mso-border-alt:10px solid #999999;mso-padding-alt:0px;">Lees button&nbsp; →</a>

You may need to adjust a few settings, such as border-radius, padding-top, bottom, left right.
See also mso-border-alt and mso-padding-alt.

Let me know how you go!

Thanks,
Lee.

Reply to Lee Borowiak

Chris Sugg replied 2020-11-18 09:46:39

Thanks, but without the VML that doesn't work in Outlook.

Outlook can't display curved borders or gradient colours with pure html & css

Lee Borowiak replied 2020-11-19 07:04:38

Hi Chris,

The button code fixes the text being chopped, but yes the rounded corners only work on Outlook 2016 Mac.

If you want a 100% bullet proof button, best to use a table with 3 TDs and use images with rounded corners for the left and right sides of the button and text in the middle.

Something like this:

<table border="0" cellspacing="0" cellpadding="0" style="background-color: #cccccc;">
<tbody>
<tr>
<td align="left" valign="middle" bgcolor="#cccccc">img</td>
<td align="left" valign="middle" bgcolor="#cccccc"><a href="https://litmus.com">button text</a></td>
<td align="left" valign="middle" bgcolor="#cccccc">img</td>
</tr>
</tbody>
</table>

Thanks,
Lee.

Reply to Lee Borowiak

Bulletproof Buttons broken in Office 365 ProPlus?

Sign in to Community

Join the Litmus Community

Sign up to Community

Get more out of your Litmus account

Forgot password