Test Results

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

Usage

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.

Variations

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

Color

Replace these sample button colors with your own.

Alignment

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">.

Examples

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 Centered

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

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.