-
-
Save elidickinson/9424116 to your computer and use it in GitHub Desktop.
Thank you for writing this code. I spent a lot of time yesterday looking for a button that looked nice and would work in Outlook. This is the first code I have found that works. Great Job!
David
does this code work properly on windows 10 mail app?
Thanks for this repo it's awesome. I wanted to have a button that changed width dynamically based on the text inside.
I found this https://litmus.com/community/discussions/538-vml-outlook-07-10-13-unwanted-20px-padding-at-the-bottom which shows how to use mso-fit-shape-to-text:true
And this https://litmus.com/community/discussions/1269-flexible-multi-line-bulletproof-buttons which shows how to avoid some unwanted padding.
This is my end result
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.EXAMPLE.com/" style="mso-wrap-style:none; mso-position-horizontal: center" arcsize="10%" strokecolor="#0368d4" strokeweight="1px" fillcolor="#d62828">
<v:textbox style="mso-fit-shape-to-text:true">
<center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">Button Text Here!</center>
</v:textbox>
</v:roundrect>
<![endif]-->
<![if !mso]>
<table cellspacing="0" cellpadding="0"> <tr>
<td align="center" width="300" height="40" bgcolor="#d62828" style="-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #ffffff; display: block;">
<a href="http://www.EXAMPLE.com/" style="font-size:16px; font-weight: bold; font-family:sans-serif; text-decoration: none; line-height:40px; width:100%; display:inline-block">
<span style="color: #ffffff;">
Button Text Here!
</span>
</a>
</td>
</tr> </table>
<![endif]>
</div>
Seems to work great in outlook 2016 which uses word to render HTML
Hey i got an issue with the code, the roundrect was overlapping the text. Can anyone give me some guides, appreciate with thanks.
<!--[if mso]> <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" style="height:36px;v-text-anchor:middle;width:350px;position:absolute; top:280; left:310;" arcsize="5%" strokecolor="#EB7035" fillcolor="#EB7035"> <w:anchorlock/> <center style="color:#ffffff;font-family: sans-serif; letter-spacing: 1px; font-size:16px;">My Text!</center> </v:roundrect> <![endif]-->
Everyone that asked how to center the button, just wrap it in a <center>
tag. I tried to horizontally align the v:roundrect
with the o:hralign="center"
attribute (along with anything else that I could find or made sense) but nothing really works. Best to just center the outer tag and the text with simple <center>
tags:
<center>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://www.example.com" style="height: 45px; v-text-anchor: middle; width: 300px;" arcsize="10%" stroke="f" fillcolor="#6699ff">
<w:anchorlock/>
<center style="color: #ffffff; font-family: sans-serif; font-size: 15px;">
Text
</center>
</v:roundrect>
</center>
what if I don't want stroke="f", why is there no documentation on the internet about this? microsoft devs should be tortured daily
how can i add text-decoration on <v:roundrect button text (underline)