<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Making Accessible Emails</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <style type="text/css">
        /* CLIENT-SPECIFIC STYLES */
        body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
        table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
        img { -ms-interpolation-mode: bicubic; }

        /* RESET STYLES */
        img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; }
        table { border-collapse: collapse !important; }
        body { height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important; }
    </style>
  </head>
  <body style="background-color: aliceblue; margin: 0 !important; padding: 60px 0 60px 0 !important;">
    <table border="0" cellspacing="0" cellpadding="0" role="presentation" width="100%">
      <tr>
          <td bgcolor="aliceblue" style="font-size: 0;">&​nbsp;</td>
          <td bgcolor="white" width="600" style="border-radius: 4px 4px 0 0; font-family: sans-serif; padding: 20px 40px;">
            <h1>Bulletproof Buttons in HTML Email</h1>
          </td>
          <td bgcolor="aliceblue" style="font-size: 0;">&​nbsp;</td>
      </tr>
      <tr>
          <td bgcolor="aliceblue" style="font-size: 0;">&​nbsp;</td>
          <td bgcolor="white"  width="600" style="font-family: sans-serif; padding: 20px 40px;">
            <h2>Classic VML-Based Button</h2>
            <!-- Generated from buttons.cm - an excellent tool from Campaign Monitor & Stig Morten Myre -->
            <div><!--[if mso]>
            <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://thebetter.email" style="height:62px;v-text-anchor:middle;width:235px;" arcsize="20%" stroke="f" fillcolor="#1E90FF">
              <w:anchorlock/>
              <center>
            <![endif]-->
                <a href="https://thebetter.email"
          style="background-color:#1E90FF;border-radius:8px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:18px;font-weight:normal;line-height:62px;text-align:center;text-decoration:none;width:235px;-webkit-text-size-adjust:none;">Read more here →</a>
            <!--[if mso]>
              </center>
            </v:roundrect>
          <![endif]--></div>
          </td>
          <td bgcolor="aliceblue" style="font-size: 0;">&​nbsp;</td>
      </tr>
      <tr>
          <td bgcolor="aliceblue" style="font-size: 0;">&​nbsp;</td>
          <td bgcolor="white"  width="600" style="font-family: sans-serif; padding: 20px 40px;">
            <h2>Padding-Based Button</h2>
            <!-- PADDING-BASED BUTTON -->
            <table border="0" cellspacing="0" cellpadding="0" role="presentation">
              <tr>
                <td bgcolor="dodgerblue" style="padding: 20px 40px 18px 40px; -webkit-border-radius: 8px; border-radius: 8px;" align="center">
                  <a href="https://thebetter.email" target="_blank" style="font-size: 18px; font-family: sans-serif; color: #ffffff; text-decoration: none; display: block;">Read more here &rarr;</a>
                </td>
              </tr>
            </table>
          </td>
          <td bgcolor="aliceblue" style="font-size: 0;">&​nbsp;</td>
      </tr>
      <tr>
          <td bgcolor="aliceblue" style="font-size: 0;">&​nbsp;</td>
          <td bgcolor="white"  width="600" style="border-radius: 0 0 4px 4px; font-family: sans-serif; padding: 20px 40px 60px 40px;">
            <h2>Border-Based Button</h2>
            <!-- BORDER-BASED BUTTON -->
            <a href="https://thebetter.email" target="_blank" style="font-size: 18px; font-family: sans-serif; color: #ffffff; text-decoration: none; border-radius: 8px; -webkit-border-radius: 8px; background-color: dodgerblue; border-top: 20px solid dodgerblue; border-bottom: 18px solid dodgerblue; border-right: 40px solid dodgerblue; border-left: 40px solid dodgerblue; display: inline-block;">Read more here &rarr;</a>
          </td>
          <td bgcolor="aliceblue" style="font-size: 0;">&​nbsp;</td>
      </tr>
    </table>
  </body>
</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.