When creating buttons for HTML email clients it’s a pretty tricky business. Buttons are very important in every email campaign, your button serves that all important purpose, it’s going to track your clicks, link through to your website and maybe even get you a sale or life long customer.
With all that at stake it’s important to make sure your HTML buttons render perfectly and are clickable on all email clients, otherwise you are going to be wasting your time sending email campaigns if your subscribers cannot click the HTML buttons you have in place.
HTML VML button for email clients
In this post I am going to show you a button that is built using the VML approach, meaning it will be fully clickable and will render in those Outlook clients we are fear.
<table width="" border="0" cellspacing="0" cellpadding="0" class="center">
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="#" style="height:36px;v-text-anchor:middle;width:150px;" arcsize="5%" strokecolor="#181818" fillcolor="#222222">
<center style="color:#ffffff;font-family: Helvetica, Arial, sans-serif;font-size:14px;">Read More</center>
<a href="#" style="background-color:#222222;border:1px solid #181818;border-radius:2px;color:#ffffff;display:inline-block;font-family: Helvetica, Arial, sans-serif;font-size:14px;line-height:36px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;mso-hide:all;">Read More</a>
So what’s going on here then?
The code above allows us to support over 40+ email clients the html button will be fully clickable too. Remember when editing this button we have style types for standard html and the vml code too, so make sure you update both.
Use this approach to HTML buttons in your next email campaign and it should improve your click through rate. Let us know how you get on in the comments below.