CodePen

HTML

            
              <table cellpadding="0" cellmargin="0" border="0" height="44" width="178" style="border-collapse: collapse; border:5px solid #c62228">
  <tr>
    <td bgcolor="#c62228" valign="middle" align="center" width="174">
      <div style="font-size: 18px; color: #ffffff; line-height: 1; margin: 0; padding: 0; mso-table-lspace:0; mso-table-rspace:0;">
        <a href="http://lrh-books.com/order_mult.php?item=upc.en.cd" style="text-decoration: none; color: #ffffff; border: 0; font-family: Arial, arial, sans-serif; mso-table-lspace:0; mso-table-rspace:0;" border="0">ORDER NOW</a>
      </div>
    </td>
  </tr>
</table>

<div class="copy">
  <p>Tested against all major email clients, this button  has <br> held up against the evils of Outlook 2007-2013.<br> Even Lotus Notes 6.5 and up look alright.</p>
</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              
/* Styles do not affect button */
body {
  background: #333;
}

table {
  margin: 100px auto;
}

div.copy {
  text-align: center;
}

.copy p {
  color: #666;
  font-size: 14px;
  line-height: 1.5;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................