How to make live text round cornered buttons with CSS3 and VML in email newsletters

It's great to have live text as much as possible because sometimes the images won't show (either blocked by the email app or loading too slow) so using background images and live text CTA (call to action) buttons is always great.

Because we are talking about clickable buttons in emails we want them to act and behave identical or as close as possible in all email clients and on all devices. So we need the whole button to be clickable and we won't use images for the corners but CSS3.

The button we will code today will work and display identical in all email clients except Outlook 2003. If you know a workaround that is not overkill, just drop a line.

Firstly we need to make the rounded corners. We will use VML for Outlook but we will hide it for other email clients and instead addressing specific Outlook versions we will code for all with <!--[if mso]><![endif]-->. To do that we will use arcsize in combination with roundrect. For background color we will use fillcolor. 

We will apply the style directly on the a tag instead of the table cell (TD).

For all clients except Outlook we will have a standard a tag with CSS on it. We will use inline style, no need for header CSS so the button will be easy to port into a different email newsletter if needed.

I also like using strokecolor for Outlook and border for the rest though is not necessary. It ads a nice effect when the buttons are on a solid background other than white. It also enforces the round corners a bit and that is the main reason I used it here hence you will notice the CTA color and the border are only one bit different.

You will also notice I used -webkit-text-size-adjust: none to force Outlook and other Internet Explorer email based clients display the same font everywhere.

The key to make the live text button clickable is to use display: inline-block on the link tag.

Other that these, it's just standard HTML and CSS and if you code emails for some time it should all look familiar. 

Alright, so we put finally everything together, this is the result, a fully functional CTA button made entirely with CSS and live text that works and looks identical in all email clients on desktop and mobile with the exception of Outlook 2003 which will display square corners unfortunately:

<!-- <a -->

<!--[if mso]>

    <v:roundrect

        xmlns:v="urn:schemas-microsoft-com:vml"

        xmlns:w="urn:schemas-microsoft-com:office:word"

        href="http://emailsnob.com/"

        style="height: 45px; v-text-anchor: middle; width: 275px;"

        arcsize="10%"

        strokecolor="#048B07"

        fillcolor="#048B06"

        target="_blank"

    >

        <w:anchorlock />

        <center style="color: #ffffff; font-family: Arial,sans-serif; font-size: 15px;">Click here</center>

    </v:roundrect>

<![endif]-->

<a

    href="http://emailsnob.com/"

    style="

        background-color: #048B06;

        border: 1px solid #048B07;

        border-radius: 4px;

        color: #ffffff;

        display: inline-block;

        font-family: Arial, sans-serif;

        font-size: 15px;

        line-height: 45px;

        text-align: center;

        text-decoration: none;

        width: 275px;

        -webkit-text-size-adjust: none;

        mso-hide: all;

    "

    target="_blank"

>

    Click here

</a>

Let me know how this works for you. Also curious if you have a different approach when coding text buttons for your email newsletter. Til then, cheers and happy coding from your email snob :)