-
-
Save elidickinson/9424116 to your computer and use it in GitHub Desktop.
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
The link seems to not work sometimes in Outlook. Will this convert it to an image in some cases - like forwarding it?
Edit: I've added another normal anchor tag around the <v:roundrect> element and seems to work.
does this code work properly on windows 10 mail app?