CakeMail: Home | Français | Blog

Getting started with your reseller account

Set up your account in a few simple steps.

Read the guide

How do I create an editable button with rounded borders for a template?

Rounded borders are supported on Apple, iPhone & iPad Mail, Thunderbird, Yahoo!, Mail, Android default client & Gmail (when viewed in browsers other than Internet Explorer)

Step 1 : Set up an Editable Container:

<div class='contentEditableContainer contentTextEditable'>
<div class='contentEditable'>
</div>
</div>

Step 2 : Paragraphs and Anchors

Use a paragraph to set up the URL’s anchor for more maneuverability when placing your <a> button in the template :

<p>
<a>
</a>
</p>

Step 3 : Paragraph Style

  • Padding: to give space between the content and the button
  • Text alignment: Centered in the container.

    <p style=’width:200px; text-align:center; padding:12px’>
    <a>
    </a>
    </p>
    

Step 4 : Anchor Style

  • Display: So it acts like a text element AND a box element
  • Background color: Black
  • Text Color: White
  • Corners: Rounded (will not display properly on all email clients)
  • Decorations: No underlined text

    <p style=’width:300px; text-align:center; padding:12px’>
    <a style=’display:inline-block;text-decoration:none;width:50px; text-align:center; background:#000000; color:#ffffff; padding:3px 15px; border-radius:12px;-moz-border-radius:12px;-webkit-border-radius:12px’>
    Shop
    </a>
    </p>
    

Step 5 : Final Code and Preview:

<div class='contentEditableContainer contentTextEditable'>
<div class='contentEditable'>
    <p style=’width:300px; text-align:center; padding:12px’>
<a style=’display:inline-block;width:50px; text-align:center; background:#000000; color:#ffffff; padding:3px 15px; border-radius:12px;’-moz-border-radius:12px;-webkit-border-radius:12px>
Shop
</a>
</p>
</div>
</div>

image

The red borders are just there to illustrate the <p> with the padding acting as a container for your button.