Buttons

Overview

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.

Illustration showing how image-based CTAs impact the message of a campaign when disabled.

Button Types

Primary (solid)

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.

Secondary (outline)

Use a secondary button for actions that are secondary to the primary call to action.

Helpful Hints

information-indicator Buttons should be used sparingly. Each additional button in an email has the potential to create confusion and reduce the visual prominence of the primary action.

checkmark Always use the colors provided by the Email Design Guide.

warning-indicator Don’t use colors outside of those documented in the color section.


Reversed (white)

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.


Button Text

The text within a button must clearly indicate what happens when it’s clicked. Text should be written in Sentence Case.

Helpful Hints

checkmark Keep it short; strive for approximately three words or 20 characters.
warning-indicator Never wrap text to two lines; instead shorten the text or consider using a link.
Examples of buttons with text that makes it clear what action will take place when clicked.

Button Groups

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.

Helpful Hints

information-indicator Mixing buttons allows you to emphasize important actions. Use only one Primary button per email.
information-indicator Buttons should appear in order of importance, with the most important action closest to the user. On desktop, the most important button is on the right and on the bottom when stacked on mobile.
Leave 8px of space between buttons in a group.

Contact Us

Have a general question or comment? Send us a message