1

I am working with some HTML/CSS and VML code to make a button render consistently in most email clients. As outlook doesn't support rounded corners I'm having to add some VML code to achieve this effect. I managed to fix most of the alignment issues but I can't figure out where the spacing at the top/bottom on the button is coming from and how to get rid of it?

I was able to use some VML code from this bulletproof email button generator and Microsoft's reference site

The reason why I'm not using the bulletproof generator is because the people responsible for adding content to emails are not technical and as such I'm trying to minimise issues by exposing them to code as little as possible. Also I understand clicks on VML buttons might not track on some Outlook clients.

Also a similar question can be found here but the solution provided there didn't work in my case or I might have overlooked something?

Below is the code I'm working with. Please note the VML button background colour has been set to green and the table that's meant to be the button is blue. I did this as it was easier for me to troubleshoot.

So far I managed to identify the strange padding around the text itself is coming from the inline css on the a tag but I can't figure our where those random lines of space at the top and bottom of the VML button are coming from.

 <!-- button -->
                      <div align="center" class="float-center" >
                     <!--[if mso]>
                       <v:roundrect
                         xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" arcsize="100%" fillcolor="green" style="width:250px; height:70px;mso-fit-shape-to-text:True;"
                         <v:stroke color="#1e6db1"/>
   
                         <center>

                     <![endif]-->
            <table class="button rounded cta-main float-center" style="Margin:16px 0 16px 0;border-collapse:collapse;border-spacing:0;float:none;margin:16px 0 16px 0;padding:0;text-align:center;vertical-align:top;width:auto">
             
              <tr style="padding:0;text-align:left;vertical-align:top">
               <td style="-moz-hyphens:none;-webkit-hyphens:none;Margin:0;border-collapse:collapse!important;color:#1f2935;font-family:Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;hyphens:none;line-height:1.5;margin:0;padding:0;text-align:left;vertical-align:top;word-break:break-word;word-wrap:break-word" valign="middle">
                <table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:center;vertical-align:top;width:100%" valign="top">
                 
                  <tr style="padding:0;text-align:left;vertical-align:top;">
                   <td style="-moz-hyphens:none;-webkit-hyphens:none;Margin:0;background:#1e6db1;border:none;border-collapse:collapse!important;-webkit-border-radius:500px;-moz-border-radius:500px;border-radius:500px;color:#fefefe;font-family:Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;hyphens:none;line-height:1.5;margin:0;padding:0;text-align:left;vertical-align:top;word-break:break-word;word-wrap:break-word" valign="top">

                    <a href="https://click.email.ucas.com/?qs=6c9084e0730ba4dc1922768cfa83b05115461a1febe2fb9df4b046be8ebdbf014229f45cf8558f65a28e9fcdb54ced5d6a5fa122aee33ef8" style="Margin:0;border:0 solid #1e6db1;border-radius:50px;color:#fefefe;display:inline-block;padding:24px 32px 24px 32px;font-family:Helvetica,Arial,sans-serif;font-size:18px;font-weight:700;mso-line-height-rule:exactly;line-height:1.5;margin:0;text-align:left;text-decoration:none;"> 
                      <span style="color:#fefefe;">
                      Finance &rsaquo;
                      </span>
                     </a>
                      
                    </td></tr></table></td></tr></table>
                        
                           <!--[if mso]>
                         </center>
                      </v:roundrect>
                     <![endif]-->
                     </div>
                    <!-- end button -->
Tibster
  • 11
  • 4

1 Answers1

1

VML stuff in general adds a lot to your file size unnecessarily. I use this for my button code and it works on all the major litmus clients:

  <table class="button"  border="0" cellpadding="0" cellspacing="0" style="background-color:#212121; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; overflow:hidden; mso-padding-alt:0px 21px 0px 21px;">
    <tr>
      <td width="100%" height="54" align="center" style="font-size:16px; line-height:16px; text-align:center; font-family:'DINPro-Medium',sans-serif; color:#FFFFFF;">
        <a href="http://buttonLink.com" target="_blank" style="color:#FFFFFF; text-decoration:none; width:100%; display:block; padding-top:16px; padding-bottom:16px;"> <span style="display:inline-block; padding-top:0px; padding-right:21px; padding-bottom:0px; padding-left:21px; color:#FFFFFF;">
        SHOP NOW
        </span></a>
      </td>
    </tr>
  </table>

Litmus also has this super helpful article on buttons:

https://litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design

Richard Clifford
  • 494
  • 3
  • 17
  • That's great but I still need to render rounded corners on buttons in outlook. So far it looks like there's no escape VML code. – Tibster Nov 20 '18 at 15:20
  • 1
    @Tibster There's a concept called graceful degradation. It's not easy to get rounded buttons in Outlook. In addition, you can't use web fonts, so `DINPro-Medium` is never going to work in Outlook or Gmail You just make concessions and have a fallback. – gwally Nov 20 '18 at 19:41
  • 1
    right. Most devs/creative teams see the lack of border-radius as an ok degration since Outlook Windows is usually an exceptionally small user base. – Richard Clifford Nov 20 '18 at 20:04
  • @gwally perhaps my question is not clear enough, I will look at rephrasing. I was able to achieve rounded corners in outlook with a little bit of VML, it's just the padding top and bottom that I need help understanding where it's coming from. I am aware of graceful degradation and that emails will not look exactly the same on all clients and I'm fine with that. – Tibster Nov 22 '18 at 09:48
  • @RichardClifford these emails will go to people in the education sector(majority outlook users) I guess the involvement of non dev/creative people makes this situation more difficult than it needs to be. – Tibster Nov 22 '18 at 09:55
  • 1
    @Tibster I looked at your code, played with it. I am unwilling to sacrifice ease of coding for 50 lines to get a rounded button in Outlook. Your current code has a button that's too narrow for Outlook, too tall for everything else. Try decreasing your padding on the `href`, the margin on the `` and increasing the height on the ``. Good luck. – gwally Nov 22 '18 at 16:13