Just last week I opened an email that contained an email button that did not appear before downloading images. When downloading images, the button had rounded corners with pixelated text in the center of it. This isn’t the first time I’ve come across this and I’m sure it won’t be the last either.
What if I told you that you don’t have to compromise on your rounded corners and you check all the best practices when displaying it. Let’s explore a simple method that works across all email clients and looks great!
The email button code
Throughout the years, we’ve been asked by clients to code email buttons that contain rounded corners. I won’t lie, I tried numerous methods with no luck as at least one email client didn’t like it and didn’t display it correctly. Until we figured out the following approach:
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center" style="padding-left:4px;padding-right:4px;height:1px;line-height:1px;font-size:1px;"><div style="display:block;height:1px;background-color:#FCEB54;line-height:1px;font-size:1px;"> </div></td>
</tr>
<tr>
<td align="center" style="padding-left:2px;padding-right:2px;height:1px;line-height:1px;font-size:1px;"><div style="display:block;height:1px;background-color:#FCEB54;line-height:1px;font-size:1px;"> </div></td>
</tr>
<tr>
<td align="center" style="padding-left:1px;padding-right:1px;height:1px;line-height:1px;font-size:1px;"><div style="display:block;height:1px;background-color:#FCEB54;line-height:1px;font-size:1px;"> </div></td>
</tr>
<tr>
<td valign="middle" align="center" bgcolor="#FCEB54" class="button_pad" style="padding: 12px 40px;-webkit-text-size-adjust: none;font-family: Arial, Helvetica, sans-serif;font-size: 12px;color: #15181A;"><table border="0" cellpadding="0" cellspacing="0" valign="middle">
<tbody>
<tr>
<td valign="middle" align="center" bgcolor="#FCEB54" style="-webkit-text-size-adjust: none;font-family: Arial, Helvetica, sans-serif;font-size: 12px;color: #15181A;"><span class="bodytext2" style="color: #15181A; font-family: arial,helvetica,sans-serif; font-size: 13px; font-weight: bold;">Get started</span></td>
<td class="pad-l4" style="padding-left: 4px" valign="middle"></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td align="center" style="padding-left:1px;padding-right:1px;height:1px;line-height:1px;font-size:1px;"><div style="display:block;height:1px;background-color:#FCEB54;line-height:1px;font-size:1px;"> </div></td>
</tr>
<tr>
<td align="center" style="padding-left:2px;padding-right:2px;height:1px;line-height:1px;font-size:1px;"><div style="display:block;height:1px;background-color:#FCEB54;line-height:1px;font-size:1px;"> </div></td>
</tr>
<tr>
<td align="center" style="padding-left:4px;padding-right:4px;height:1px;line-height:1px;font-size:1px;"><div style="display:block;height:1px;background-color:#FCEB54;line-height:1px;font-size:1px;"> </div></td>
</tr>
</tbody>
</table>
Don’t forget to add your <a> tag for where the button is clicked.
And voilà, the result:
|
||
The Codepen
Tips you should know
Reminder if you’re new to email template coding: it’s a little different to website coding. For example, you cannot use background images with text above them. This presents certain challenges to get the style you’re looking for. These limitations should be reflected in your email design mockups.
For a more comprehensive guide on how to code HTML emails, read this lengthy article from Campaign Monitor that breaks it down for you. For direct assistance, we’re here to help!
About HomeTree Digital
HomeTree Digital is a full-service digital marketing agency for financial services. We specialize in branding & creative, videography, web & mobile development, integrations, automations, email marketing, social media marketing, paid advertising, SEO, and analytics. If you are facing challenges in any of these areas, please reach out to us for assistance.
HomeTree is defined as a wise resourceful home that provides knowledge, instills inspiration, encourages creativity and protects. While harmoniously connecting its residents through its branches and roots to the outer world. This accurately describes the approach we take when it comes to our clients. We believe in excellent customer service and prioritizing you. Our mission is to provide you with the know-how to succeed in this rapidly evolving digital world.
