Buttons

Code

VML-BASED BUTTON

<table width="100" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td bgcolor="#e9703e">
         <div>
            <!--[if mso]>
           <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://litmus.com" style="height:36px;v-text-anchor:middle;width:150px;" arcsize="5%" strokecolor="#EB7035" fillcolor="#EB7035">
              <w:anchorlock/>
              <center style="color:#ffffff;font-family:Helvetica, Arial,sans-serif;font-size:16px;">I am a button &rarr;</center>
           </v:roundrect>
           <![endif]-->
            <a href="http://buttons.cm" style="background-color:#EB7035;border:1px solid #EB7035;border-radius:3px;color:#ffffff;display:inline-block;font-size:16px;font-family:sans-serif;color:#ffffff;text-decoration:none;mso-line-height-rule: exactly; line-height:54px;text-align:center;width:150px;-webkit-text-size-adjust:none;mso-hide:all;">I am a button &rarr;</a>
         </div>
      </td>
   </tr>
</table>


PADDING-BASED BUTTON

<table border="0" width="100%" cellspacing="0" cellpadding="0">
   <tbody>
      <tr>
         <td>
            <table border="0" cellspacing="0" cellpadding="0">
               <tbody>
                  <tr>
                     <td style="padding: 12px 18px 12px 18px; -webkit-border-radius: 3px; border-radius: 3px;" align="center" bgcolor="#EB7035">
                        <p style="font-size: 16px; font-family: sans-serif; color: #ffffff; text-decoration: none; mso-line-height-rule: exactly; line-height: 30px; mso-text-raise: 12px;">I am a button →</p>
                        &nbsp;
                     </td>
                  </tr>
               </tbody>
            </table>
         </td>
      </tr>
   </tbody>
</table>


BORDER-BASED BUTTON

<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td>
         <table border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td bgcolor="#e9703e">
                  <a href="http://litmus.com" target="_blank" style="font-size:16px;font-family:sans-serif;color:#ffffff;text-decoration:none; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; background-color: #EB7035; border-top: 12px solid #EB7035; border-bottom: 12px solid #EB7035; border-right: 18px solid #EB7035; border-left: 18px solid #EB7035; display: inline-block;">
                     <p style="font-size:16px;font-family:sans-serif;color:#ffffff;text-decoration:none;mso-line-height-rule: exactly; line-height:30px;mso-text-raise: 12px;">
                        I am a button &rarr;
                     </p>
                  </a>
               </td>
            </tr>
         </table>
      </td>
   </tr>
</table>


PADDING + BORDER-BASED BUTTON

<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td>
         <table border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td align="center" style="-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;" bgcolor="#e9703e">
                  <a href="https://litmus.com" target="_blank" style="font-size:16px;font-family:sans-serif;color:#ffffff;text-decoration:none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 12px 18px; border: 1px solid #e9703e; display: inline-block;">
                     <p style="font-size:16px;font-family:sans-serif;color:#ffffff;text-decoration:none;mso-line-height-rule: exactly; line-height:30px;mso-text-raise: 12px;">
                        I am a button &rarr;
                     </p>
                  </a>
               </td>
            </tr>
         </table>
      </td>
   </tr>
</table>


LINE-HEIGHT BASED BUTTON

<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td valign="middle">
         <table border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td align="center" valign="middle" bgcolor="#00c0e7" width="150" style="width:170px; padding: 0px 10px 0px 10px; -webkit-border-radius:3px; border-radius:3px;">
                  <a href="http://edmdesigner.com" target="_blank" style="font-size:16px;font-family:sans-serif;color:#ffffff;text-decoration:none;width: 150px; font-weight: normal; display: inline-block;">
                     <p style="font-size:16px;font-family:sans-serif;color:#ffffff;text-decoration:none;mso-line-height-rule: exactly; line-height:54px;mso-text-raise: 12px;">
                        I am a button &rarr;
                     </p>
                  </a>
               </td>
            </tr>
         </table>
      </td>
   </tr>
</table>


NATIVE BUTTON in “a” TAG

<table cellpadding="0" cellspacing="0" border="0">
   <tbody>
      <tr>
         <td valign="middle"" align="center">
            <table cellpadding="0" cellspacing="0" border="0" bgcolor="#00c0e7" class="full-width" style="border: 1px solid #00c0e7; border-radius: 3px; border-collapse: separate !important; background-color: #00c0e7;">
               <tbody>
                  <tr>
                     <td valign="middle" align="center">
                        <a href="http://edmdesigner.com" target="_blank">
                           <button style="font-size:16px;font-family:sans-serif;background-color: #00c0e7;color:#ffffff;text-decoration:none;border-radius: 3px; border-radius: 3px; border:0px solid transparent;background-image: none;cursor: pointer;outline: none;">
                              <p style="font-size:16px;font-family:sans-serif;color:#ffffff;text-decoration:none;mso-line-height-rule: exactly; line-height:54px;mso-text-raise: 12px;">
                                 I am a button &rarr;
                              </p>
                           </button>
                        </a>
                     </td>
                  </tr>
               </tbody>
            </table>
         </td>
      </tr>
   </tbody>
</table>


TABLE BASED BUTTON (Best for Outlook)

<table cellpadding="0" cellspacing="0" border="0">
   <tbody>
      <tr>
         <td valign="middle">
            <div>
               <a href="http://edmdesigner.com" target="_blank" style="text-decoration: none;">
                  <table cellpadding="0" cellspacing="0" border="0" bgcolor="#00c0e7" style="width: 160px;height: 54px; border-radius: 3px;">
                     <tbody>
                        <tr>
                           <td align="center" valign="middle">
                              <p style="font-size:16px;font-family:sans-serif;color:#ffffff;text-decoration:none;mso-line-height-rule: exactly; line-height:54px;mso-text-raise: 12px;">
                                 I am a button &rarr;
                              </p>
                           </td>
                        </tr>
                     </tbody>
                  </table>
               </a>
            </div>
         </td>
      </tr>
   </tbody>
</table>