Sections

Buttons

Buttons are the primary way for users to take action from an email. Buttons should have ample click / tap space and describe their actions. Creating a button that displays consistently across email clients requires multiple HTML tags.

Styles

Section titled Styles

A button’s visual weight should correspond to the importance of the button’s action. The more important the action, the heavier the button’s visual weight.

Primary

Section titled Primary

A visual style used to highlight the most important actions. To avoid confusing users, don’t use more than one primary button within an email section.

<td class="s-btn s-btn__primary" style="border-radius: 4px; background: #0095ff; text-align: center;">
    <a class="s-btn s-btn__primary" href="#" style="background: #0095FF; border: 1px solid #0077cc; box-shadow: inset 0 1px 0 0 rgba(102,191,255,.75); font-family: arial, sans-serif; font-size: 17px; line-height: 17px; color: #ffffff; text-align: center; text-decoration: none; padding: 13px 17px; display: block; border-radius: 4px;">
        …
    </a>
</td>

Ask question

White

Section titled White

A visual style used to highlight the most important actions on a dark background. To avoid confusing users, don’t use more than one white button within an email.

<td class="s-btn s-btn__white" style="border-radius: 4px; background: #ffffff; text-align: center;">
    <a class="s-btn s-btn__white" href="#" style="background: #ffffff; border: 1px solid #ffffff; font-family: arial, sans-serif; color: #0077cc; font-size: 17px; line-height: 17px; text-align: center; text-decoration: none; padding: 13px 17px; display: block; border-radius: 4px;">
        …
    </a>
</td>

Ask question

Outlined

Section titled Outlined

All buttons, by default, are secondary buttons.

<td class="s-btn s-btn__outlined" style="border-radius: 4px; background: #ffffff; text-align: center;">
    <a class="s-btn s-btn__outlined" href="#" style="background: #ffffff; border: 1px solid #0077cc; font-family: arial, sans-serif; font-size: 17px; line-height: 17px; color: #0077cc; text-align: center; text-decoration: none; padding: 13px 17px; display: block; border-radius: 4px; white-space: nowrap;">
        …
    </a>
</td>

Ask question

Note: Using the s-btn class with s-btn__primary, s-btn__white or s-btn__outlined applies :hover progressive enhancements defined in the <style> tag. Only email clients that support <style> in <head> will render the :hover.

Sizes

Section titled Sizes

Default

Section titled Default

The default size for email buttons is appropriate for most emails. Useful for emails with one or two main calls-to-action.

<td class="s-btn s-btn__primary" style="border-radius: 4px; background: #0095ff; text-align: center;">
    <a class="s-btn s-btn__primary" href="#" style="background: #0095FF; border: 1px solid #0077cc; box-shadow: inset 0 1px 0 0 rgba(102,191,255,.75); font-family: arial, sans-serif; font-size: 17px; line-height: 17px; color: #ffffff; text-align: center; text-decoration: none; padding: 13px 17px; display: block; border-radius: 4px;">
        …
    </a>
</td>

<td class="s-btn s-btn__white" style="border-radius: 4px; background: #ffffff; text-align: center;">
    <a class="s-btn s-btn__white" href="#" style="background: #ffffff; border: 1px solid #ffffff; font-family: arial, sans-serif; color: #0077cc; font-size: 17px; line-height: 17px; text-align: center; text-decoration: none; padding: 13px 17px; display: block; border-radius: 4px;">
        …
    </a>
</td>

<td class="s-btn s-btn__outlined" style="border-radius: 4px; background: #ffffff; text-align: center;">
    <a class="s-btn s-btn__outlined" href="#" style="background: #ffffff; border: 1px solid #0077cc; font-family: arial, sans-serif; font-size: 17px; line-height: 17px; color: #0077cc; text-align: center; text-decoration: none; padding: 13px 17px; display: block; border-radius: 4px; white-space: nowrap;">
        …
    </a>
</td>

Ask question

Small

Section titled Small

A slightly smaller button size is appropriate for emails with multiple calls-to-action, like a newsletter or an email hero with multiple calls-to-action.

<td class="s-btn s-btn__primary" style="border-radius: 3px; background: #0095ff; text-align: center;">
    <a class="s-btn s-btn__primary" href="#" style="background: #0095FF; border: 1px solid #0077cc; box-shadow: inset 0 1px 0 0 rgba(102,191,255,.75); font-family: arial, sans-serif; font-size: 13px; line-height: 13px; color: #ffffff; text-align: center; text-decoration: none; padding: 10px; display: block; border-radius: 3px;">
        …
    </a>
</td>

<td class="s-btn s-btn__white" style="border-radius: 3px; background: #ffffff; text-align: center;">
    <a class="s-btn s-btn__white" href="#" style="background: #ffffff; border: 1px solid #ffffff; font-family: arial, sans-serif; color: #0077cc; font-size: 13px; line-height: 13px; text-align: center; text-decoration: none; padding: 10px; display: block; border-radius: 3px;">
        …
    </a>
</td>

<td class="s-btn s-btn__outlined" style="border-radius: 3px; background: #ffffff; text-align: center;">
    <a class="s-btn s-btn__outlined" href="#" style="background: #ffffff; border: 1px solid #0077cc; font-family: arial, sans-serif; font-size: 13px; line-height: 13px; color: #0077cc; text-align: center; text-decoration: none; padding: 10px; display: block; border-radius: 3px; white-space: nowrap;">
        …
    </a>
</td>

Ask question

Edit on GitHub