1. Home
  2. Reseller Admin Console
  3. Library
  4. How do I create an editable button with rounded borders for a template?

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>

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

[Total: 0    Average: 0/5]
Updated on July 20, 2018

Related Articles