› News › Web Development
 › Create buttons with rounded corners for emails – How to
   -   3 March, 2020

Create buttons with rounded corners for emails – How to

A simple way to create buttons with rounded corners that work in all email clients, including the nefarious Outlook family.

The other week I had a client who was insistent on having their rounded buttons in their new HTML Mailchimp template. After spending way too long tearing my hair out trying to get it working in all clients, I stumbled across the below hack.

The below code is a simple way of creating these buttons. The only downside is that the button URL needs to be inserted twice: once into the VML script, and once into the standard HTML.

The code:

<div align="center">
<!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://studiotwofold.com.au" style="height:36px;v-text-anchor:middle;width:200px;" arcsize="50%" stroke="f" fillcolor="#FC4C02">
    <w:anchorlock/>
    <center>
    <![endif]-->
    <a href="https://studiotwofold.com.au"
    style="background-color:#FC4C02;border-radius:18px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:36px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;">Here is your button!</a>
  <!--[if mso]>
    </center>
  </v:roundrect>
<![endif]--></div>

The Codepen:

See the Pen Rounded Corner Button for Outlook by Jamie (@studiotwofold) on CodePen.

Source: https://buttons.cm

CATEGORIES
POPULAR ARTICLES
How to install your beautiful new email signature
How to install your beautiful new email signature

Displaying a beautifully designed new email signature in your emails can help elevate your business and help your potential clients take you seriously. A custom-designed email signature can have a call to action to drive sales. It can be used to inform your clients on...

Are you eligible for a $3000 Small Business Recovery Grant?
Are you eligible for a $3000 Small Business Recovery Grant?

NSW eligible small businesses, not-for-profits, and other business types that have fewer than 20 Full Time Equivalent (FTE) staff (including non-employing businesses, such as sole traders) as at 1 March 2020 can apply for recovery grants from $500 to $3,000. There's...

5 Ways to Improve the SEO of your website
5 Ways to Improve the SEO of your website

Aussies like to be well informed before parting with their hard-earned cash. In Australia, 84% of consumers will check out research online before making a purchase or using your service. This means your website not only has to sell the right goods but also answer the...

TAGGED WITH

//

We want to hear what you think about this article, or what you would like us to write about next! Submit a comment below or write to us at hello@studiotwofold.com.au.
Studio Twofold provides creative design services and advice to growing Australian businesses to help them feel confident and kick goals. Learn more about us.

READ THESE NEXT

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Want to talk?

Our process begins with a conversation about your business and how we can help.