MF
0
Outlook's disappearing bulletproof button text
I'm seeing an issue with a very limited number of users (I can't even reproduce myself) where the bulletproof buttons within our promotional emails are not rendering correctly.
The text over the button disappears and only the color of the button remains. One fix seemed to be restarting outlook, but this didn't work for one user. This problem only occurs in Outlook desktop on a PC.
Here is the code we're using. Any ideas why this would be happening and if there is a fix from my side?
<!-- Start Bulletproof Button Row -->
<tr>
<td width="30" align="center" bgcolor="#f1f4f8"> </td>
<td width="305" align="center" bgcolor="#f1f4f8">
<table align="center" border="0" bgcolor="#f1f4f8" cellpadding="0" cellspacing="0" height="45">
<tr>
<td align="center" height="43" style="font-family: 'Heebo', Arial, sans-serif; font-size: 13px; line-height:16px; font-weight:normal; color:#000000; border: 2px #000000 solid;" valign="center"><a href="#" style="color: #000000; font-size: 13px; text-decoration: none; display: block; width: 100%; padding-top: 10px; padding-bottom: 10px; text-transform: uppercase; font-weight: 700; letter-spacing: 2px;" target="_blank"> VIEW DETAILS </a>
</td>
</tr>
</table>
</td>
<td width="30" align="center" bgcolor="#f1f4f8"> </td>
</tr>
<!-- Close Bulletproof Button Row -->
Any insight would be greatly appreciated!
Hey Melinda,
Check you don't have code in your CSS that makes visited links the same colour as your button
Also sometimes Outlook gets funny with rendering font when there is a web font and it needs to fallback. Very glitchy but i have seen it happen.
Try adding a 1 on the end of the hex code. so #000001 instead of #000000. You wont notice the difference.
Thanks, Nicholas! I will try this!
Hey! What's up, Melinda :)
I've tested the provided button code and seems to work just fine on all Outlook's.
Would you share a screenshot of the issue and where exactly is happening?
Other than that you might try <font> tag around the text.
<font color="#000000">VIEW DETAILS</font>Steve
Email Dev
MailBakery
Thanks, Steve! I will try this one too!
Hello,
this also could be that Outlook iOS ignoring you can fix that if u wrap it inside a <span> element. Let us know if u could fix the problem =)