Donation buttons in e-mail

Options
Hello everyone,


I was wondering if anyone else has trouble creating giving buttons in luminate online e-mails? The line of code that we typically use creates buttons in all e-mail platforms except outlook. This is the code we had been using:


<div><!--[if mso]>

<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://giving.northeastern.edu/" style="height:50px;v-text-anchor:middle;width:150px;" arcsize="8%" strokecolor="#FF7F27" fillcolor="#FF7F27">

<w:anchorlock />

<center style="color:#000000;font-family:sans-serif;font-size:16px;font-weight:bold;" _mce_style="color: #000000; font-family: sans-serif; font-size: 16px; font-weight: bold;">Make your gift! </center>

</v:roundrect>

<![endif]--><a style="background-color: #ff7f27; border-radius: 4px; color: #000000; display: inline-block; font-family: sans-serif; font-size: 16px; font-weight: bold; line-height: 50px; text-align: center; text-decoration: none; width: 150px;" href="https://giving.northeastern.edu/">Make your gift! </a></div>


If anyone has any insight into how to fix this issue--that would be great!


Thank you!

Amanda Tsapatsaris
Tagged:

Comments

  • Hi Amanda,


    Try this:

    <div><!--[if mso]>

    <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://giving.northeastern.edu" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="10%" strokecolor="#1e3650" fill="t">

    <v:fill type="tile" src="https://i.imgur.com/0xPEf.gif" color="#FF7F27" />

    <w:anchorlock/>

    <center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Show me the button!</center>

    </v:roundrect>

    <![endif]--><a href="https://giving.northeastern.edu"

    style="background-color:#FF7F27;background-image:url(https://i.imgur.com/0xPEf.gif);border:1px solid #1e3650;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;mso-hide:all;">Make your gift!</a></div>


    A great resource for buttons is done by campaign monitor:

    https://buttons.cm/


    Basically build a button. :-)


    You will have to edit the code above a bit to fit your colors, but it will work in all clients.


    Thanks,


    Phil

Categories