Buttons

These cute clickable dials are how we let members know what action they should take

How we use them

  • Keep button copy short
  • Use the primary button style to show the most important action
  • The primary button style should only be used once per major section of a page
  • The size of the copy lets you know how big the button should be. If we have full-width buttons on some components and not others the website starts to look a bit messy

Designed for inclusion

  • All of our buttons are set at 48px high; a nice big tap target
  • We keep button copy clear and concise, for optimum usability
  • We ensure that our buttons have the appropriate aria labelling to give all users clarity

Standard centered button

View demo Open in new window
Open in new window
320 x 568
View code 
    <tr>
                              <td style="padding-top: 16px; padding-bottom: 24px; background-color: #ffffff; vertical-align: top; text-align: center; overflow: hidden;" bgcolor="#ffffff" valign="top" align="center">
                                <table style="margin: auto; text-align: center; overflow: hidden;" align="center">
                                  <tr>
                                    <td style="margin: auto; color: #000000; background-color: #ffffff; vertical-align: top; text-align: center; overflow: hidden; padding-top: 9px; padding-bottom: 16px;" bgcolor="#ffffff" valign="top" align="center">
                                      <div>
                                        <!--[if mso]>
      <div style="text-align: center;">
        <v:roundrect
          xmlns:v="urn:schemas-microsoft-com:vml"
          xmlns:w="urn:schemas-microsoft-com:office:word"
          arcsize="50%"
          strokecolor="#000000"
          strokeweight="2pt"
          style="v-text-anchor:middle;height:48px;width:208px;"
          href="http://www.giffgaff.com"
          fillcolor="white">
        <v:shadow
          on="True"
          offset="0% 10%"
          color="black" />
        <center style="color:#000000;font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif !important; font-size:20px;font-weight:bold;">
          Buy now
        </center>
        </v:roundrect>
      </div>
    <![endif]-->
                                        <a href="#" class="gg-e-text gg-e-button--secondary" style="mso-hide: all; border: solid 2px #000000; border-bottom: solid 6px #000000; border-radius: 24px; padding: 8px 24px; cursor: pointer; font-size: 20px; font-weight: bold; background-color: #FFFFFF; font-family: 'Poppins', 'Century Gothic', 'CenturyGothic', 'AppleGothic', sans-serif; color: #000000; text-decoration: none;"> Buy now </a>
                                      </div>
                                    </td>
                                  </tr>
                                </table>
                              </td>
                            </tr>

Primary centered button

Primary buttons should convey the main action. Try to only use these once per email.

View demo Open in new window
Open in new window
320 x 568
View code 
    <tr>
  <td style="margin: auto; text-align: center; background-color: #FFFFFF; color: #000000; overflow: hidden; padding-top: 9px; padding-bottom: 16px;" align="center" bgcolor="#FFFFFF">
    <div>
      <!--[if mso]>
        <div style="text-align: center;">
          <v:roundrect
            xmlns:v="urn:schemas-microsoft-com:vml"
            xmlns:w="urn:schemas-microsoft-com:office:word"
            arcsize="50%"
            strokecolor="#000000"
            strokeweight="2pt"
            style="v-text-anchor:middle;height:48px;width:208px;"
            href="http://www.giffgaff.com"
            fillcolor="#FCC41E">
          <v:shadow
            on="True"
            offset="0% 10%"
            color="black" />
          <center style="color:#000000;font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif !important; font-size:20px;font-weight:bold;">
            Buy now
          </center>
          </v:roundrect>
        </div>
      <![endif]-->
      <a href="#" class="gg-e-text gg-e-button--primary" style="mso-hide: all; border: solid 2px #000000; border-bottom: solid 6px #000000; border-radius: 24px; padding: 8px 24px; cursor: pointer; font-size: 20px; font-weight: bold; font-family: 'Poppins', 'Century Gothic', 'CenturyGothic', 'AppleGothic', sans-serif; background-color: #FCC31E; color: #000000; text-decoration: none;"> Buy now </a>
    </div>
  </td>
</tr>