Skip to main content

The perfect button

· 3 min read
Nicki Pabst
Nicki Pabst
The perfect button

Emoji article cover image

Here is the guide to make a full supported button, rounded or square

Transparent Round button​

Transparent button

This button is fully transparent, and you will not have to worry about which background color you will put on top of. To work properly in Outlook, the button needs to have a width.

<td align="center">
    <div>

    <!--[if mso]>
        <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="#" style="width:111px; height:45px; v-text-anchor:middle;" arcsize="73%" stroke="#245157" strokecolor="#245157"  strokeweight="2pt">
            <w:anchorlock/>
            <center>
        <![endif]-->

         <a class="button_outline" href="#" style="mso-border-color-alt: none; mso-border-alt: none; background-color:transparent; border:2px solid #245157; border-radius:100px; color:#245157; display:inline-block;font-size: 16px; font-family: Montserrat, Arial, sans-serif; font-weight:500;line-height:22px;text-align:center;text-decoration:none;-webkit-text-size-adjust:none; min-width:85px; padding: 8px 30px; mso-padding-alt: 0 20px;" target="_blank">I'm a button</a><!--[if mso]>

                 </center>
            </v:roundrect>
        <![endif]-->

    </div>
</td>

Within our platform, we calculate the width in Liquid, and therefore the will the width of the button always be the perfect size. The Liquid code looks like this:

{% assign buttonWidth = article.cta_text | size | times: 8 | plus: 55% | round %}

Full color Round button​

Full color button

This button has a background color, and is less tricky to deal with. Not only is the whole button clickable in Outlook, it is also rounded and size-accurate

<td align="center">
  <div>

    <!--[if mso]>
        <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="#" style="width:111px; height:45px; v-text-anchor:middle; border: 1px solid #245157; mso-padding-alt: 12px 55px 12px 55px;" arcsize="73%" stroke="f" fillcolor="#245157" strokecolor="#245157">
        <w:anchorlock/>
        <center>
    <![endif]-->

    <a class="button" href="#" style=" background-color:#245157;border-radius:100px; color:#ffffff; display:inline-block;font-size: 16px; font-family: Montserrat, Arial, sans-serif; font-weight:500;line-height:22px;text-align:center;text-decoration:none;-webkit-text-size-adjust:none; min-width:85px; padding: 8px 30px; mso-padding-alt: 0 20px;; pointer-events: none;">I'm a button</a>

    <!--[if mso]>
        </center>
        </v:roundrect>
    <![endif]-->

  </div>
</td

Hover animation on the buttons​

Hover animation button 
.button{
  background-color:#245157;
  color:#ffffff;
  border: 2px solid #245157;
  -webkit-transition:.5s;
      -moz-transition:.5s;
      -ms-transition:.5s;
}
.button:hover{
  background-color:#54bdcb !important;
  color:#ffffff !important;
  -webkit-transition:.5s;
      -moz-transition:.5s;
      -ms-transition:.5s;
}

Square responsive button for Outlook​

Square button

Unfortunately, if you do not use Better.email, you cannot have a responsive AND round button. We use liquid to calculate the width of the button, and other systems are simply not able to do that. However, here is a square responsive button. That means you do not have to add a width.

<tr>
<!--[if mso]>
<td align="center">
  <table cellspacing="0" cellpadding="0" border="0" style="vertical-align:middle; background-color: #191919; mso-padding-alt: 12px 40px 12px 40px;">
    <tr>
      <![endif]-->

          <td align="center">
   <a href="#" class="button" style="mso-line-height-alt: 22px; border: 1px solid #191919; background-color: #191919; color:#ffffff; display:inline-block;mso-bidi-font-family: Helvetica, Arial, sans-serif; font-family: 'Special Font', Helvetica, Arial, sans-serif; font-size:14px;font-weight:400;line-height:44px;text-align:center;text-decoration:none;min-width:145px; -webkit-text-size-adjust:none; padding: 0 20px 0 20px; text-transform:uppercase;" target="_blank">I'M A BUTTON</a>
          </td>

        <!--[if mso]>
      </tr>
      </table>
    </td>
  <![endif]-->
</tr>

Ready to start making Better emails? Book a demo here.