I know this is an old blog post, but the code example you've given for VML buttons is the same as Mark's conditional padding example.

Mark's is definitely my favourite approach if you don't need to specify a 100% width desktop button :)

I can provide some example of VML button, like this:
https://drive.google.com/fi...

Of course, in real project, we need to add also some conditional logic, described in here: https://www.litmus.com/blog...

Thanks a lot Jason,

this article has helped me save a lot of time and headache!

#4 worked best for us. Thank you!

Nice tutotial

I Am constantly trying to figure out how to push the boundaries for
email Coding/Design. Could Litmus or someone provide an update for 2020
so some of us don't have to spend hours looking for each fix for outlook
and or newer codes. I am working In marketing cloud on a daily basis so
it would be nice to know what codes and best practices are the most
efficient for certain Email marketing systems. Thanks in advance.

This article is not bulletproof. As of HTML5, you can put a div inside a anchor tag, so there's no issue. The whole div is clickable.

We've found the table based approach to still meet our needs. I built a button generator for it here: https://riaanp.github.io/bu... This works in Gmail, Outlook for PC and Mac and on the major android and ios mail apps from what we're seeing. hth.

Another major issue we see is that Outlook for PC doesnt follow the width instruction when using @2x images. It simply displays them at their actual size, so we use the correct sized images in things like headers and so on.

Anything in particular that jumps out at you? Seems fairly spot on still for much of it except maybe the test results, but that's to be expected. The article is dated 2017.

As of HTML5, you can put a div inside a anchor tag, so there's no issue. The whole div is clickable.

Full working exemple, Office365 included :

https://codepen.io/yauuik/p...

Didnt work for me in Outlook - only the text is clickable not the full button area :-(

I was just asking... it's okay if something is 2 years old as long as it's still relevant. I see things in here that are old, and still relevant is why I asked is all, but if it bothers you that much don't worry about it!

For example, Bulletproof buttons still work across *most* Outlook clients. The VML technique is also useful for applying multi-layered images as partial backgrounds and utilizing transparencies. It all depends on your team's goals.

I see where there have been new clients introduced that don't follow the same rules, but that doesn't mean everything in this article is useless/wrong just because it's dated!

None of these works with Office 365, but the Outlook web appear correctly. Anyone have the actual solution?

Full working exemple, Office365 included :

https://codepen.io/yauuik/p...

None of these buttons now work with Outlook Android. Outlook recently updated, and now all button font colors for bulletproof buttons default to blue. I've tried all of the hacks, and none of them unfortunately work.

I've been using this with success as recently as a few days ago. It displays correctly in real test emails to gmail, ios mail, outlook web, outlook apps, and outlook desktop as well as in our Litmus account.

The Litmus previews don't seem to work anymore. Could you guys give this wonderful blog post an update? Thanks!

When using the border or padding or border + padding options, the button is taller in Outlook and Windows 10 and the text is pushed up towards the top of the button.

PADDING + BORDER-BASED BUTTONS seems to work OK in all email clients.

The VML button seems to 'break' when forwarded or replied. You get button but also another odd looking duplicate link to the right of it. Is there any way to fix that?

In outlook after "", anchor tag is displaying. endif condition is not working in microsoft outlook

VML button don't seem to work in Office365 App. But Litmus don't have this in their browser tests.

I’m noticing the width of the button depends on how many characters the
button text has for the padding + border approach. Any idea how to set a
fixed width so all the buttons are the same size no matter the
character count of the button text?

You can set a min-width, I set mine to 300px, but keep in mind that the table will stretch if someone has a more verbose CTA.

Thanks so much Andrew, that worked. Now to get Outlook 2007 and 2010 to display the full width of the button. min-width doesn't seem to be working in the conditional code.

You won't be able to do so. What I did was wrap MSO conditional comments around all of it, and went with an old-school hyperlinked text inside a colored table cell when MSO.

Would you mind pasting some of that code?

On site with another client right now and don't have access to it, but here is a simple skeleton that should help you.

Not sure if you're going to be able to see the code in this window. I can see it when editing it.

Your cool button code here that will render in all other browsers.

Damn, it didn't show up for me Andrew.

In the VML example the v:roundrect tags are wrapped in an MSO conditional comment. For the bulletproof button portion of your code, delete all the v:round rect tags and wrap it in the mso comment just like the example except make it when NOT MSO, like this: [if !mso]

For the simple table cell and hyperlinked text button, wrap that in the exact same comment as the VML example where the condition IS MSO, like so: [if mso]

Make sense?

I created a snippet on the Litmus Community here: https://litmus.com/communit...

Did the new Gmail break these? None of them look good in the web browser for me.

To ensure that the padding takes effect on the Padding + Border-Based buttons (such as on Outlook 2010), do not omit the border on the link.

If you are using the Padding + Border approach you might see a slight rendering issue at the bottom of the button in the Gmail app where the bottom border is rendering outside of the table cell.

To fix this issue, I set a min-height on the table, and it took care of it. Depending on your top and bottom padding, and your font size, you'll have to experiment a bit.

If you have top and bottom padding of 12px and a font size of 16px, then you'll need to set min-height to 52px.

Hope that helps someone!

@AndAndrew Driscoll why 52px please? Can you please elaborate further? Thanks

52 pixels height was what finally worked for me to fix the issue given that I had top and bottom padding at 12px and a font size of 16px.

It isn't a hard and fast rule of always using 52px, but it would just depend on the padding and font size values that you are using. Again, you'll have to experiment to find the number that works for whatever you are using.

HTH

I got you, thanks for the tip. Totally agree it all depends on padding and font size used, line-height, etc

Thank you. One other thing I’m noticing the width of the button depends on how many characters the button text has for the padding + border approach. Any idea how to set a fixed width so all the buttons are the same size no matter the character count of the button text?

Also, the button was intended to align left in the parent td set to align left, but in some clients it was center aligning. To fix that, I added align="left" to the table.

I have instituted your fix. It works great and I've finally got border-radius in an email format. However, I am unable to get the buttons to display side-by-side. I've attempted to use "display: inline-block;" anywhere I can, but it's not working. Here's a screenshot - http://prntscr.com/ifr5ai

Hi Jared,
I was looking at the same thing. I found that duplicating the <td> for the second button put the buttons side by side. I am now looking at how to get enough space between them to make them look good.
My first approach was to have multiple tables, but I got the same result you did.

Then if you want space between the two buttons, you can use cellspacing="10" (or whatever value you want instead of 10) to give you space between the buttons. Just note that this gives you 10 pixels on all sides of the button, not just between the two buttons.

Have you tried putting align="left" on the table? It might solve your issue.

Hey Guys,

I don't know if it's a stupid comment but why can't we put the entire table inside the anchor tag. This sorts out the making the entire table clickable part.

I just tried that out and didn't see any apparent issue on Outlook Client or any major ESP.

Is it like a bad practice or am I missing out a major issue here?

I believe that this can be an issue for older Outlook clients, but I'm not exactly sure which ones. It should work in many cases, but I'd thoroughly test it to ensure that it doesn't get stripped in some clients, completely rendering the link unclickable.

Thanks for Guide
Now my email template is looking good for outlook.

I'm using the Padding + Border-based approach. But the left padding and right padding aren't being applied to the buttons in Outlook on Windows. Do you have a suggestion to fix this?