Button

Turn a link into a button.

Class Result
.btnthe base button class to setup structure
.btn-primarybackground-color: #0d6efd;
.btn-secondarybackground-color: #6c757d;
.btn-successbackground-color: #198754;
.btn-infobackground-color: #0dcaf0;
.btn-warningbackground-color: #ffc107;
.btn-dangerbackground-color: #dc3545;
.btn-lightbackground-color: #f8f9fa;
.btn-darkbackground-color: #212529;
.btn-blackbackground-color: #000000;
.btn-whitebackground-color: #ffffff;
.btn-gray-100background-color: #f8f9fa;
.btn-gray-200background-color: #e9ecef;
.btn-gray-300background-color: #dee2e6;
.btn-gray-400background-color: #ced4da;
.btn-gray-500background-color: #adb5bd;
.btn-gray-600background-color: #6c757d;
.btn-gray-700background-color: #495057;
.btn-gray-800background-color: #343a40;
.btn-gray-900background-color: #212529;
.btn-blue-100background-color: #cfe2ff;
.btn-blue-200background-color: #9ec5fe;
.btn-blue-300background-color: #6ea8fe;
.btn-blue-400background-color: #3d8bfd;
.btn-blue-500background-color: #0d6efd;
.btn-blue-600background-color: #0a58ca;
.btn-blue-700background-color: #084298;
.btn-blue-800background-color: #052c65;
.btn-blue-900background-color: #031633;
.btn-indigo-100background-color: #e0cffc;
.btn-indigo-200background-color: #c29ffa;
.btn-indigo-300background-color: #a370f7;
.btn-indigo-400background-color: #8540f5;
.btn-indigo-500background-color: #6610f2;
.btn-indigo-600background-color: #520dc2;
.btn-indigo-700background-color: #3d0a91;
.btn-indigo-800background-color: #290661;
.btn-indigo-900background-color: #140330;
.btn-purple-100background-color: #e2d9f3;
.btn-purple-200background-color: #c5b3e6;
.btn-purple-300background-color: #a98eda;
.btn-purple-400background-color: #8c68cd;
.btn-purple-500background-color: #6f42c1;
.btn-purple-600background-color: #59359a;
.btn-purple-700background-color: #432874;
.btn-purple-800background-color: #2c1a4d;
.btn-purple-900background-color: #160d27;
.btn-pink-100background-color: #f7d6e6;
.btn-pink-200background-color: #efadce;
.btn-pink-300background-color: #e685b5;
.btn-pink-400background-color: #de5c9d;
.btn-pink-500background-color: #d63384;
.btn-pink-600background-color: #ab296a;
.btn-pink-700background-color: #801f4f;
.btn-pink-800background-color: #561435;
.btn-pink-900background-color: #2b0a1a;
.btn-red-100background-color: #f8d7da;
.btn-red-200background-color: #f1aeb5;
.btn-red-300background-color: #ea868f;
.btn-red-400background-color: #e35d6a;
.btn-red-500background-color: #dc3545;
.btn-red-600background-color: #b02a37;
.btn-red-700background-color: #842029;
.btn-red-800background-color: #58151c;
.btn-red-900background-color: #2c0b0e;
.btn-orange-100background-color: #ffe5d0;
.btn-orange-200background-color: #fecba1;
.btn-orange-300background-color: #feb272;
.btn-orange-400background-color: #fd9843;
.btn-orange-500background-color: #fd7e14;
.btn-orange-600background-color: #ca6510;
.btn-orange-700background-color: #984c0c;
.btn-orange-800background-color: #653208;
.btn-orange-900background-color: #331904;
.btn-yellow-100background-color: #fff3cd;
.btn-yellow-200background-color: #ffe69c;
.btn-yellow-300background-color: #ffda6a;
.btn-yellow-400background-color: #ffcd39;
.btn-yellow-500background-color: #ffc107;
.btn-yellow-600background-color: #cc9a06;
.btn-yellow-700background-color: #997404;
.btn-yellow-800background-color: #664d03;
.btn-yellow-900background-color: #332701;
.btn-green-100background-color: #d1e7dd;
.btn-green-200background-color: #a3cfbb;
.btn-green-300background-color: #75b798;
.btn-green-400background-color: #479f76;
.btn-green-500background-color: #198754;
.btn-green-600background-color: #146c43;
.btn-green-700background-color: #0f5132;
.btn-green-800background-color: #0a3622;
.btn-green-900background-color: #051b11;
.btn-teal-100background-color: #d2f4ea;
.btn-teal-200background-color: #a6e9d5;
.btn-teal-300background-color: #79dfc1;
.btn-teal-400background-color: #4dd4ac;
.btn-teal-500background-color: #20c997;
.btn-teal-600background-color: #1aa179;
.btn-teal-700background-color: #13795b;
.btn-teal-800background-color: #0d503c;
.btn-teal-900background-color: #06281e;
.btn-cyan-100background-color: #cff4fc;
.btn-cyan-200background-color: #9eeaf9;
.btn-cyan-300background-color: #6edff6;
.btn-cyan-400background-color: #3dd5f3;
.btn-cyan-500background-color: #0dcaf0;
.btn-cyan-600background-color: #0aa2c0;
.btn-cyan-700background-color: #087990;
.btn-cyan-800background-color: #055160;
.btn-cyan-900background-color: #032830;
.btn-outline-primaryborder-color: #0d6efd; text-color: #0d6efd; background-color: transparent;
.btn-outline-secondaryborder-color: #6c757d; text-color: #6c757d; background-color: transparent;
.btn-outline-successborder-color: #198754; text-color: #198754; background-color: transparent;
.btn-outline-infoborder-color: #0dcaf0; text-color: #0dcaf0; background-color: transparent;
.btn-outline-warningborder-color: #ffc107; text-color: #ffc107; background-color: transparent;
.btn-outline-dangerborder-color: #dc3545; text-color: #dc3545; background-color: transparent;
.btn-outline-lightborder-color: #f8f9fa; text-color: #f8f9fa; background-color: transparent;
.btn-outline-darkborder-color: #212529; text-color: #212529; background-color: transparent;
.btn-outline-blackborder-color: #000000; text-color: #000000; background-color: transparent;
.btn-outline-whiteborder-color: #ffffff; text-color: #ffffff; background-color: transparent;
.btn-outline-gray-100border-color: #f8f9fa; text-color: #f8f9fa; background-color: transparent;
.btn-outline-gray-200border-color: #e9ecef; text-color: #e9ecef; background-color: transparent;
.btn-outline-gray-300border-color: #dee2e6; text-color: #dee2e6; background-color: transparent;
.btn-outline-gray-400border-color: #ced4da; text-color: #ced4da; background-color: transparent;
.btn-outline-gray-500border-color: #adb5bd; text-color: #adb5bd; background-color: transparent;
.btn-outline-gray-600border-color: #6c757d; text-color: #6c757d; background-color: transparent;
.btn-outline-gray-700border-color: #495057; text-color: #495057; background-color: transparent;
.btn-outline-gray-800border-color: #343a40; text-color: #343a40; background-color: transparent;
.btn-outline-gray-900border-color: #212529; text-color: #212529; background-color: transparent;
.btn-outline-blue-100border-color: #cfe2ff; text-color: #cfe2ff; background-color: transparent;
.btn-outline-blue-200border-color: #9ec5fe; text-color: #9ec5fe; background-color: transparent;
.btn-outline-blue-300border-color: #6ea8fe; text-color: #6ea8fe; background-color: transparent;
.btn-outline-blue-400border-color: #3d8bfd; text-color: #3d8bfd; background-color: transparent;
.btn-outline-blue-500border-color: #0d6efd; text-color: #0d6efd; background-color: transparent;
.btn-outline-blue-600border-color: #0a58ca; text-color: #0a58ca; background-color: transparent;
.btn-outline-blue-700border-color: #084298; text-color: #084298; background-color: transparent;
.btn-outline-blue-800border-color: #052c65; text-color: #052c65; background-color: transparent;
.btn-outline-blue-900border-color: #031633; text-color: #031633; background-color: transparent;
.btn-outline-indigo-100border-color: #e0cffc; text-color: #e0cffc; background-color: transparent;
.btn-outline-indigo-200border-color: #c29ffa; text-color: #c29ffa; background-color: transparent;
.btn-outline-indigo-300border-color: #a370f7; text-color: #a370f7; background-color: transparent;
.btn-outline-indigo-400border-color: #8540f5; text-color: #8540f5; background-color: transparent;
.btn-outline-indigo-500border-color: #6610f2; text-color: #6610f2; background-color: transparent;
.btn-outline-indigo-600border-color: #520dc2; text-color: #520dc2; background-color: transparent;
.btn-outline-indigo-700border-color: #3d0a91; text-color: #3d0a91; background-color: transparent;
.btn-outline-indigo-800border-color: #290661; text-color: #290661; background-color: transparent;
.btn-outline-indigo-900border-color: #140330; text-color: #140330; background-color: transparent;
.btn-outline-purple-100border-color: #e2d9f3; text-color: #e2d9f3; background-color: transparent;
.btn-outline-purple-200border-color: #c5b3e6; text-color: #c5b3e6; background-color: transparent;
.btn-outline-purple-300border-color: #a98eda; text-color: #a98eda; background-color: transparent;
.btn-outline-purple-400border-color: #8c68cd; text-color: #8c68cd; background-color: transparent;
.btn-outline-purple-500border-color: #6f42c1; text-color: #6f42c1; background-color: transparent;
.btn-outline-purple-600border-color: #59359a; text-color: #59359a; background-color: transparent;
.btn-outline-purple-700border-color: #432874; text-color: #432874; background-color: transparent;
.btn-outline-purple-800border-color: #2c1a4d; text-color: #2c1a4d; background-color: transparent;
.btn-outline-purple-900border-color: #160d27; text-color: #160d27; background-color: transparent;
.btn-outline-pink-100border-color: #f7d6e6; text-color: #f7d6e6; background-color: transparent;
.btn-outline-pink-200border-color: #efadce; text-color: #efadce; background-color: transparent;
.btn-outline-pink-300border-color: #e685b5; text-color: #e685b5; background-color: transparent;
.btn-outline-pink-400border-color: #de5c9d; text-color: #de5c9d; background-color: transparent;
.btn-outline-pink-500border-color: #d63384; text-color: #d63384; background-color: transparent;
.btn-outline-pink-600border-color: #ab296a; text-color: #ab296a; background-color: transparent;
.btn-outline-pink-700border-color: #801f4f; text-color: #801f4f; background-color: transparent;
.btn-outline-pink-800border-color: #561435; text-color: #561435; background-color: transparent;
.btn-outline-pink-900border-color: #2b0a1a; text-color: #2b0a1a; background-color: transparent;
.btn-outline-red-100border-color: #f8d7da; text-color: #f8d7da; background-color: transparent;
.btn-outline-red-200border-color: #f1aeb5; text-color: #f1aeb5; background-color: transparent;
.btn-outline-red-300border-color: #ea868f; text-color: #ea868f; background-color: transparent;
.btn-outline-red-400border-color: #e35d6a; text-color: #e35d6a; background-color: transparent;
.btn-outline-red-500border-color: #dc3545; text-color: #dc3545; background-color: transparent;
.btn-outline-red-600border-color: #b02a37; text-color: #b02a37; background-color: transparent;
.btn-outline-red-700border-color: #842029; text-color: #842029; background-color: transparent;
.btn-outline-red-800border-color: #58151c; text-color: #58151c; background-color: transparent;
.btn-outline-red-900border-color: #2c0b0e; text-color: #2c0b0e; background-color: transparent;
.btn-outline-orange-100border-color: #ffe5d0; text-color: #ffe5d0; background-color: transparent;
.btn-outline-orange-200border-color: #fecba1; text-color: #fecba1; background-color: transparent;
.btn-outline-orange-300border-color: #feb272; text-color: #feb272; background-color: transparent;
.btn-outline-orange-400border-color: #fd9843; text-color: #fd9843; background-color: transparent;
.btn-outline-orange-500border-color: #fd7e14; text-color: #fd7e14; background-color: transparent;
.btn-outline-orange-600border-color: #ca6510; text-color: #ca6510; background-color: transparent;
.btn-outline-orange-700border-color: #984c0c; text-color: #984c0c; background-color: transparent;
.btn-outline-orange-800border-color: #653208; text-color: #653208; background-color: transparent;
.btn-outline-orange-900border-color: #331904; text-color: #331904; background-color: transparent;
.btn-outline-yellow-100border-color: #fff3cd; text-color: #fff3cd; background-color: transparent;
.btn-outline-yellow-200border-color: #ffe69c; text-color: #ffe69c; background-color: transparent;
.btn-outline-yellow-300border-color: #ffda6a; text-color: #ffda6a; background-color: transparent;
.btn-outline-yellow-400border-color: #ffcd39; text-color: #ffcd39; background-color: transparent;
.btn-outline-yellow-500border-color: #ffc107; text-color: #ffc107; background-color: transparent;
.btn-outline-yellow-600border-color: #cc9a06; text-color: #cc9a06; background-color: transparent;
.btn-outline-yellow-700border-color: #997404; text-color: #997404; background-color: transparent;
.btn-outline-yellow-800border-color: #664d03; text-color: #664d03; background-color: transparent;
.btn-outline-yellow-900border-color: #332701; text-color: #332701; background-color: transparent;
.btn-outline-green-100border-color: #d1e7dd; text-color: #d1e7dd; background-color: transparent;
.btn-outline-green-200border-color: #a3cfbb; text-color: #a3cfbb; background-color: transparent;
.btn-outline-green-300border-color: #75b798; text-color: #75b798; background-color: transparent;
.btn-outline-green-400border-color: #479f76; text-color: #479f76; background-color: transparent;
.btn-outline-green-500border-color: #198754; text-color: #198754; background-color: transparent;
.btn-outline-green-600border-color: #146c43; text-color: #146c43; background-color: transparent;
.btn-outline-green-700border-color: #0f5132; text-color: #0f5132; background-color: transparent;
.btn-outline-green-800border-color: #0a3622; text-color: #0a3622; background-color: transparent;
.btn-outline-green-900border-color: #051b11; text-color: #051b11; background-color: transparent;
.btn-outline-teal-100border-color: #d2f4ea; text-color: #d2f4ea; background-color: transparent;
.btn-outline-teal-200border-color: #a6e9d5; text-color: #a6e9d5; background-color: transparent;
.btn-outline-teal-300border-color: #79dfc1; text-color: #79dfc1; background-color: transparent;
.btn-outline-teal-400border-color: #4dd4ac; text-color: #4dd4ac; background-color: transparent;
.btn-outline-teal-500border-color: #20c997; text-color: #20c997; background-color: transparent;
.btn-outline-teal-600border-color: #1aa179; text-color: #1aa179; background-color: transparent;
.btn-outline-teal-700border-color: #13795b; text-color: #13795b; background-color: transparent;
.btn-outline-teal-800border-color: #0d503c; text-color: #0d503c; background-color: transparent;
.btn-outline-teal-900border-color: #06281e; text-color: #06281e; background-color: transparent;
.btn-outline-cyan-100border-color: #cff4fc; text-color: #cff4fc; background-color: transparent;
.btn-outline-cyan-200border-color: #9eeaf9; text-color: #9eeaf9; background-color: transparent;
.btn-outline-cyan-300border-color: #6edff6; text-color: #6edff6; background-color: transparent;
.btn-outline-cyan-400border-color: #3dd5f3; text-color: #3dd5f3; background-color: transparent;
.btn-outline-cyan-500border-color: #0dcaf0; text-color: #0dcaf0; background-color: transparent;
.btn-outline-cyan-600border-color: #0aa2c0; text-color: #0aa2c0; background-color: transparent;
.btn-outline-cyan-700border-color: #087990; text-color: #087990; background-color: transparent;
.btn-outline-cyan-800border-color: #055160; text-color: #055160; background-color: transparent;
.btn-outline-cyan-900border-color: #032830; text-color: #032830; background-color: transparent;

Usage

Buttons are ONLY to be used with an anchor <a> tag. The there are classes for all the theme and palette colors, so you can use btn-primary as well as btn-blue-300.

<a class="btn btn-primary" href="https://bootstrapemail.com">Primary</a>
<a class="btn btn-secondary" href="https://bootstrapemail.com">Secondary</a>
<a class="btn btn-success" href="https://bootstrapemail.com">Success</a>
<a class="btn btn-danger" href="https://bootstrapemail.com">Danger</a>
<a class="btn btn-warning" href="https://bootstrapemail.com">Warning</a>
<a class="btn btn-info" href="https://bootstrapemail.com">Info</a>
<a class="btn btn-light" href="https://bootstrapemail.com">Light</a>
<a class="btn btn-dark" href="https://bootstrapemail.com">Dark</a>

Primary Secondary Success Danger Warning Info Light Dark

Warning: You must supply a url in the href. Using just pound sign is not enough for some emails to render an anchor tag correctly.

Usage

You can use outlined versions of every button by simply adding the outline keyword to the class like btn-outline-primary or btn-outline-green-500.

<a class="btn btn-outline-primary" href="https://bootstrapemail.com">Primary</a>
<a class="btn btn-outline-green-500" href="https://bootstrapemail.com">Green</a>

Primary Green

Sizes

You can use btn-sm or btn-lg for smaller or larger buttons and text respectively. If you want to just adjust the padding size of a button you can use the Padding utility classes.

<a class="btn btn-primary btn-sm" href="https://bootstrapemail.com">Large button</a>
<a class="btn btn-primary btn-lg" href="https://bootstrapemail.com">Large button</a>

Large button Large button

Compiled Example

Input

<a class="btn btn-primary" href="https://example.com">Click Me</a>

Output

<table class="btn btn-primary" role="presentation" border="0" cellpadding="0" cellspacing="0" style="border-radius: 6px; border-collapse: separate !important;">
  <tbody>
    <tr>
      <td style="line-height: 24px; font-size: 16px; border-radius: 6px; margin: 0;" align="center" bgcolor="#0d6efd">
        <a href="https://example.com" style="color: #ffffff; font-size: 16px; font-family: Helvetica, Arial, sans-serif; text-decoration: none; border-radius: 6px; line-height: 20px; display: inline-block; font-weight: normal; white-space: nowrap; background-color: #0d6efd; padding: 8px 12px; border: 1px solid #0d6efd;">Click Me</a>
      </td>
    </tr>
  </tbody>
</table>
On this page