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.
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.
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>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>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>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.
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>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>