› 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
The importance of consistency to build a solid brand.
The importance of consistency to build a solid brand.

Branding is much more than just a cool logo or a well-placed advertisement. A solid brand is the foundation upon which your corporate culture and future growth is built. Crucial to every business, it tells people that you care about what you deliver, that you live up...

Stop spam in WordPress: How to (Updated for 2020)
Stop spam in WordPress: How to (Updated for 2020)

It converts selected email addresses characters to HTML entities to block spambots. Not all characters in the email address are converted: the selection is random and changes each time the function is called. To use this in your WordPress Content area all...

Backing up your WordPress Website – How to
Backing up your WordPress Website – How to

There are many reasons to backup your WordPress website before making major changes or updating core functionalities. Backing up is one of the best things you can do to give you peace of mind when the catastrophic happens. Your website is worth all the money and time...

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.