Buttons signify the main call to action of an email and are critical in enticing subscribers to interact with a campaign. Because of image-blocking, it is important not to use image-based CTAs or hide the context of your message within a larger image.
We use a padding and border-based approach to create our buttons using code instead of images. By only using HTML and CSS, the button will display in all email clients even with images off, ensuring all subcribers can understand our message.
More information on building “bulletproof” buttons for email can be found on Litmus.
Use a primary button for the most important call to action in your message. This is the default button that should be used in most cases.
Use a secondary button for actions that are secondary to the primary call to action.
The default buttons work well on light-colored backgrounds, but get lost against darker colors. Use the reversed versions of the primary and secondary buttons on a darker backrgound.
The text within a button must clearly indicate what happens when it’s clicked. Text should be written in Sentence Case.
Buttons can be grouped together when there are multiple actions a subscriber can take. In order to guide the susbcriber and not overwhelm, it’s recommended that a group be limited to a maximum of two buttons.
There should be a minimum of 8px of padding between buttons.