Buttons

Creating a button successfully in email requires multiple html tags to progressively enhance and prevent text-decoration in certain email clients.

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.

1
2
3
4
5
<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>

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.

1
2
3
4
5
<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>

Outlined

All buttons, by default, are secondary buttons.

1
2
3
4
5
<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>
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.