CODEWITHSUNDEEP
htmlbuttongraphicshyperlinkoutlook
Michael Libman
Michael Libman

Reputation: 1

Button is empty in Outlook

I am trying to add a hyperlink button to an Email template I am making and for some reason when opening this email via Outlook the button is empty with boarders only and non of the graphic style included. When opening this in a Web Browser everything looks fine even on Gmail, not sure where is the problem, I hope someone can help. This is the code line for the button:

<div align="center" class="button-container center " style="padding-right: 10px; padding-left: 10px; padding-top:10px; padding-bottom:10px;"><!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-spacing: 0; border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"><tr><td style="padding-right: 10px; padding-left: 10px; padding-top:10px; padding-bottom:10px;" align="center"><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="" style="height:27pt; v-text-anchor:middle; width:129pt;" arcsize="17%" strokecolor="#59B5EB" fillcolor="#FFFFFF"><w:anchorlock/><v:textbox inset="0,0,0,0"><center style="color:#59B5EB; font-family:Roboto, 'Helvetica Neue', Helvetica, sans-serif; font-size:16px;"><![endif]-->
    <div style="color: #59B5EB; background-color: #FF0000; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; max-width: 172px; width: 132px;width: auto; border-top: 2px solid #FFFFFF; border-right: 2px solid #FFFFFF; border-bottom: 2px solid #FFFFFF; border-left: 2px solid #FFFFFF; padding-top: 5px; padding-right: 20px; padding-bottom: 0px; padding-left: 20px; font-family: Roboto, 'Helvetica Neue', Helvetica, sans-serif; text-align: center; mso-border-alt: none;"><span style="font-size:18px;line-height:40px;"><a href="http://mywebsite.com" style="text-decoration: none; color: #FFFFFF; font-weight:bold">Join Team</a></span></div>
    <!--[if mso]></center></v:textbox></v:roundrect></td></tr></table><![endif]--></div>

Upvotes: 0

Views: 108

Answers (1)

gwally
gwally

Reputation: 3527

This is an example of a button that will work in Outlook and other email clients:

<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" style="margin: auto;">
  <tr>
    <td style="border-radius: 6px; background: #ff0000;">
      <a href="http://mywebsite.com" style="background: #ff0000; border: 1px solid #ff0000; font-family: sans-serif; font-size: 15px; line-height: 15px; text-decoration: none; padding: 13px 17px; color: #ffffff; display: block; border-radius: 6px;">Join Team</a>
    </td>
  </tr>
</table>

Nearly everything in your code example will have issues with Outlook and other email clients.

For example, Outlook does not work well with <div>. Outlook does not work well with padding. Outlook will not work with Google fonts like Roboto or fonts with two names like Helvetica Neue. It's not going to work with rounded corners, so border-radius: 6px; will be ignored. Maybe arcsize="17%" will work, but I don't have to test it. I just wanted to give you a way to go forward.

Good luck.

Upvotes: 1

Related Questions