Skip to main content

Round buttons

Round CTA buttons are a common email pattern, but they need careful HTML to render consistently across clients, especially in Outlook.

This guide shows a practical button pattern and how to make it editable in Better Email.

Step 1: Start with a reliable button pattern​

If you already have a tested round-button snippet, use that. Otherwise, start from a pattern that includes both:

  • a normal anchor tag for most clients
  • VML fallback for Outlook

If you want deeper background reading on button compatibility, these references are useful:

Example button code​

<td class="button" align="center">
  <div>
    <!--[if mso]>
      <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{ button.button_link }}" style="width:{{ buttonWidth }}px; height:60px; v-text-anchor:middle; border: 1px solid #000000; mso-padding-alt: 12px 55px 12px 55px;" arcsize="112%" stroke="f" fillcolor="#000000" strokecolor="#000000">
      <w:anchorlock/>
      <center>
    <![endif]-->
    <a class="button" href="{{ button.button_link }}" style="background-color:#000000; border-radius:100px; color:#ffffff; display:inline-block; font-size:18px; font-family:Open Sans, Helvetica, Arial, sans-serif; font-weight:bold; line-height:22px; text-align:center; text-decoration:none; -webkit-text-size-adjust:none; min-width:45px; padding:18px 30px; mso-padding-alt:0 30px;">
      {{ button.button_text }}
    </a>
    <!--[if mso]>
      </center>
      </v:roundrect>
    <![endif]-->
  </div>
</td>

Step 2: Make the button editable​

Create a module and paste in the button code.

Then add two inputs:

  • a Text String for the button label
  • a Link input for the destination URL

The example above uses the URL in both the VML block and the anchor tag. That is expected. Outlook uses the VML version, while most other clients use the anchor tag.

TODO: Add a screenshot of the module settings showing the button text input and link input side by side.

Step 3: Test the button​

Before rolling the module out widely, test:

  • the label length
  • mobile wrapping
  • Outlook rendering
  • hover or focus styling if you use it