Issue
I have a button in my email, which when viewed through outlook has some problems with border radius. It is not considering the styles which I give for border-radius and padding. But the same is supported in the browser and working as expected. Is there any hack to make these styles working in outlook?
<td style="border-radius: 2px;" bgcolor="#0c6cd7">
Solution
border-radius property is not supported by outlook, as it uses MS-word template. we need to code for outlook too. Please find the below piece of code which will work for both outlook and browser or other email clients.
<td>
<div>
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://example.com" style="height:36px;v-text-anchor:middle;width:150px;" arcsize="5%" strokecolor="#EB7035" fillcolor="#EB7035">
<w:anchorlock/>
<center style="color:#ffffff;font-family:Helvetica, Arial,sans-serif;font-size:16px;">I am a button →</center>
</v:roundrect>
<![endif]-->
<a href="http://example.com" style="background-color:#EB7035;border:1px solid #EB7035;border-radius:3px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;line-height:44px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;mso-hide:all;">I am a button →</a>
</div>
</td>
Answered By - Jeeva D
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.