I’ve found two HTML solutions for adding buttons to email: the BulletProof Button and the Bombproof Button.

The difference for the buttons:
• The “bulletproof” is old (circa 2013-2015), and while it does a good job with making email buttons look nice with rounded corners on most versions of Outlook, it no longer has the greatest support everywhere, especially with some Android phones. Thus you get weirdness like the doubled button effect when the email is opened on the android OnePlus 3 phone, for example. So it’s not really “bulletproof” anymore. Unfortunately, this is not fixable with the current CSS support on Android.

• The new “bombproof” button work on all clients in Email on Acid testing without the “doubled” effect. The sole issue with this button is the rounded corners do not show on some versions of Outlook. This includes the usual suspects: Outlook 2007, 2010, 2013, and 2016 on Windows. As always, Outlook is Why We Cannot Have Nice Things.

  <style>
  /*********************************
  ++ -- updated -- 04/04/2019
  /* sample styling for Bombproof Button -
  /* NOTE: Select the CSS that matches the desired scaling
 /* the alias tag is used for reporting in Salesforce marketing cloud
  /*************************/

/*  desktop and mobile adjustments - desktop experience */
.hideOnMobile {
   display:block!important;
}

@media only screen and (min-width: 641px) { /*Apple Mail, iPad, iPad mini, Outlook 2011, 2016, outlook.com, yahoo*/
   .hideOnMobile {display:none;}
}
@media only screen and (max-width: 640px) {
/*  desktop and mobile adjustments - mobile experience */
.hideOnMobile {
   display:none!important;
   width:0;
   visibility: hidden;
 }

  /* Bombproof Button full width on mobile */
  .button-size {
    width: 100%!important;
    height: auto!important;
    margin: 25px auto !important;
  }

  /*Bombproof Button half width on mobile, font scaling */
  .button-size {
    font-size: 1.4em !important;
    line-height: 150% !important;
    width: 60%!important;
    height: 80px!important;
    margin: 25px auto !important;
  }


}
/* gmail app on iOS */
@supports (-webkit-overflow-scrolling:touch) and (color:#ffff) {
/* Bombproof button extends to 100% width */
div > u ~ div .gmailbutton { width: 100%!important;}
}
</style>


<!-- Blue Bombproof Button -->
<div class="button-wrapper" style="margin:20px auto;">
  <table align="center" bgcolor="#457c9c" border="0" cellpadding="0" cellspacing="0" class="button-size" style="border-radius: 8px;" role="presentation">
  <tr>
    <td bgcolor="#457c9c" class="hideOnMobile" style="border-top-left-radius: 8px; border-bottom-left-radius: 8px;" width="8"></td>
    <td align="center" bgcolor="#457c9c" class="button-size gmailbutton" style="font-size: 16px; line-height:22px; font-family:sans-serif; color: #ffffff; text-decoration: none; vertical-align: middle; height:44px; border-radius: 8px;">
      <a href="#" style="font-size: 16px; line-height:22px; font-family:sans-serif; color: #ffffff; text-decoration: none; vertical-align: middle; letter-spacing: 1px; padding: 12px 32px; border: 1px solid #457c9c; border-radius: 8px; display: block;" target="_blank">
      <!--[if mso]>   <![endif]-->
      <span>Button Text Here</span>
      <!--[if mso]>   <![endif]-->
      </a>
    </td>
    <td bgcolor="#457c9c" class="hideOnMobile" style="border-top-right-radius: 8px; border-bottom-right-radius: 8px;" width="8"></td>
  </tr>
  </table>
</div>
<!-- /Bombproof Button -->


<!-- Blue Bombproof Button - full width on mobile -->
<div class="button-wrapper" style="margin:20px auto;">
  <table align="center" bgcolor="#457c9c" border="0" cellpadding="0" cellspacing="0" class="button-size" style="border-radius: 8px;" role="presentation">
  <tr>
    <td bgcolor="#457c9c" class="hideOnMobile" style="border-top-left-radius: 8px; border-bottom-left-radius: 8px;" width="8"></td>
    <td align="center" bgcolor="#457c9c" class="button-size gmailbutton" style="font-size: 16px; line-height:22px; font-family:sans-serif; color: #ffffff; text-decoration: none; vertical-align: middle; height:44px; border-radius: 8px;">
      <a href="#" alias="Button" style="font-size: 16px; line-height:22px; font-family:sans-serif; color: #ffffff; text-decoration: none; vertical-align: middle; letter-spacing: 1px; padding: 12px 32px; border: 1px solid #457c9c; border-radius: 8px; display: block;" target="_blank">
      <!--[if mso]>   <![endif]-->
      <span>Button Text Here</span>
      <!--[if mso]>   <![endif]-->
      </a>
    </td>
    <td bgcolor="#457c9c" class="hideOnMobile" style="border-top-right-radius: 8px; border-bottom-right-radius: 8px;" width="8"></td>
  </tr>
  </table>
</div>
<!-- /Bombproof Button -->



<!-- Bombproof Button - orange -->
<div class="button-wrapper" style="margin:20px auto 30px;">
  <table align="center" bgcolor="#CC3900" border="0" cellpadding="0" cellspacing="0" class="button-size" style="border-radius:20px;" role="presentation">
  <tr>
    <td bgcolor="#CC3900" class="hideOnMobile" style="border-top-left-radius: 20px; border-bottom-left-radius: 20px;" width="32"></td>
    <td align="center" bgcolor="#CC3900" class="button-size gmailbutton" style="font-family: Verdana, Geneva, sans-serif;font-size:20px;font-weight:bold;line-height:22px;color: #ffffff; text-decoration: none; vertical-align: middle; height:44px; border-radius: 20px;">
      <a href="#" alias="Button" style="color: #ffffff; text-decoration: none; vertical-align: middle; letter-spacing: 1px; padding: 10px 52px; border: 1px solid #CC3900; border-radius: 20px; display: block;" target="_blank">
      <!--[if mso]>   <![endif]-->
      <span>Button Text Here</span>
      <!--[if mso]>   <![endif]-->
      </a>
    </td>
    <td bgcolor="#CC3900" class="hideOnMobile" style="border-top-right-radius: 20px; border-bottom-right-radius: 20px;" width="32"></td>
  </tr>
  </table>
</div>
<!-- /Bombproof Button -->

Resources:

“FORGET BULLETPROOF HTML/CSS EMAIL BUTTONS – MAKE THEM BOMBPROOF!” by Jay Oram, October 18, 2018
http://www.emaildesignreview.com/html-email-coding/bombproof-html-css-email-button-3487/

Last modified: April 5, 2019