Buttons are used to trigger an action.
Want proof? View the test results to see how a button element renders across each of 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.
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.
Use the code below to create a left-aligned button using your primary color.A left-aligned button with the primary style applied.
Use the code below to create a centered button using your primary color.A centered button with the primary style applied.
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.
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.
If you need two buttons next to each other, it’s best to use one primary button and one secondary button.