Responsive Buttons in Email Templates

In some situations, it may be helpful for a button in an email to span the full width of the screen on mobile devices. While right-handed users find it easier to tap the left side of the phone screen with their thumbs, left-handed users find it easier to tap the right side. With a call to action as prominent as a button, making it easier to tap can be helpful for any user.

Let’s look at how to make a button in an email template one size on desktop but stretch to fit the screen on mobile devices for easier use.

Here’s a standard HTML button and how it looks when viewing the email on a desktop:

Code:

<table border="0" cellpadding="0" cellspacing="0" class="emailButton" style="border-radius:3px; background-color:#6DC6DD;">
  <tr>
    <td align="center" valign="middle" class="emailButtonContent" style="padding-top:15px; padding-right:30px; padding-bottom:15px; padding-left:30px;">
      <a href="..." target="_blank" style="color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:16px; font-weight:bold; text-decoration:none;">Buy Now</a>
    </td>
  </tr>
</table>

First, we want to adjust the button’s width on small screens, but it’s also a good idea to increase the text size and change the link to a block-level element:

<style type="text/css">
  @media only screen and (max-width: 480px){
    .emailButton{
      max-width:600px !important;
      width:100% !important;
    }

    .emailButton a{
      display:block !important;
      font-size:18px !important;
    }
  }
</style>

The code above creates a more user-friendly and readable button on mobile devices:

This solution is currently considered the best approach for buttons in email templates.