Email Kit


Buttons are used to trigger an action.

Paul Sylling

Test Results


Want proof? View the test results to see how a button element renders across each of the most common email clients

Email Kit is rigorously tested on the most common email clients.


With traditional web development, there is generally a clear distinction between buttons and links.

  • Use a link when you want to navigate to another page.
  • Use a button when you want to take an action on a page.

However, when developing HTML emails, these two elements begin to blur. For example, forms are not supported in an email, but you might want to use a button for your call-to-action. In those cases, instead of using a button tag, you will instead use Email Kit’s built-in classes to style an a tag to look like a button.


Both the color and alignment of buttons can be easily customized by using Email Kit's built-in classes.


Replace these sample button colors with your own.

Color Name Use Classes Properties
Blue Primary .button-bg-primary Color: #007bff
Gray Secondary .button-bg-secondary Color: #6c757d
Green Success .button-bg-success Color: #28a745
Red Danger .button-bg-danger Color: #dc3545
Email Kit includes the following predefined button styles.

Buttons use the align attribute to specify the horizontal alignment within in a table cell. To align your button left, use <td align="left"> and to center use <td align="center">.


Copy the code below and paste it into a table within the .panel-body to create a button in your email.

Primary Left-Aligned

Use the code below to create a left-aligned button using your primary color.

Primary Left-Aligned
A left-aligned button with the primary style applied.
Primary Centered

Use the code below to create a centered button using your primary color.

Primary Centered
A centered button with the primary style applied.

Best Practices

Follow these best practices when using buttons.

  • Use your primary brand color for call-to-action buttons.

Frequently Asked Questions

Answers to common questions about buttons in Email Kit.

Should I have more than one primary button in my email?

It’s best to have one primary button and then use secondary buttons or links. If you really want multiple primary buttons, it’s best to vary the sizing. For example, your primary call-to-action would be medium or large and the others small to medium.

Can I put buttons next to each other?

If you need two buttons next to each other, it’s best to use one primary button and one secondary button.