Foundation
Jump to Nav

Button

Buttons are convenient tools when you need more traditional actions. To that end, Foundation has many easy to use button styles that you can customize or override to fit your needs.


Creating a bullet-proof button that works in all email clients requires a table nested inside of a table. Put the class .button on the outer <table>. Inside of the inner table, put an <a> with an href attribute containing your link.

In Inky HTML, the <button> tag creates all of this markup for you.

HTML
<button href="#">Button</button>
<table class="button">
  <tr>
    <td>
      <table>
        <tr>
          <td><a href="#">Button</a></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

DEMO

- It's important to add an href attribute to your <button>'s to ensure that Outlook.com will not display [undefined] in your rendered email.
- Office 365 and Outlook.com require a valid url in the href attribute or you can use the # placeholder.

Sizing

By default, buttons are sized by the content and padding within them. You can also size a button according to it's parent container (see Expanded section).

Buttons can be made larger or smaller by adding the class .tiny, .small, or .large to a button's outer <table>.

In Inky HTML, add the same class to the <button> tag.

HTML
<button href="#" class="tiny">Tiny Button</button>
<button href="#" class="small">Small Button</button>
<button href="#">Default Button</button>
<button href="#" class="large">Large Button</button>
<table class="button tiny">
  <tr>
    <td>
      <table>
        <tr>
          <td><a href="#">Tiny Button</a></td>
        </tr>
      </table>
    </td>
  </tr>
</table>
<table class="button small">
  <tr>
    <td>
      <table>
        <tr>
          <td><a href="#">Small Button</a></td>
        </tr>
      </table>
    </td>
  </tr>
</table>
<table class="button">
  <tr>
    <td>
      <table>
        <tr>
          <td><a href="#">Default Button</a></td>
        </tr>
      </table>
    </td>
  </tr>
</table>
<table class="button large">
  <tr>
    <td>
      <table>
        <tr>
          <td><a href="#">Large Button</a></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

DEMO

Don't forget the href="" ;)


Expanded

To create an expanded button (full width of it's container), add the class .expanded to the outer <table> of the button, and wrap a <center> tag around the <a>.

In Inky HTML, add the .expanded class to the <button> tag. If you want the button to be expanded on small only, add the .small-expanded.

HTML
<row>
  <column>
    <button href="#" class="expanded">Expanded Button</button>
    <button href="#" class="small-expanded">Expand small only</button>
  </column>
</row>
<table class="row">
  <tbody>
    <tr>
      <column>
        <table class="button expanded">
          <tr>
            <td>
              <table>
                <tr>
                  <td>
                    <center data-parsed=""><a href="#" align="center" class="float-center">Expanded Button</a></center>
                  </td>
                </tr>
              </table>
            </td>
            <td class="expander"></td>
          </tr>
        </table>
        <table class="button small-expanded">
          <tr>
            <td>
              <table>
                <tr>
                  <td><a href="#">Expand small only</a></td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </column>
    </tr>
  </tbody>
</table>

DEMO


Coloring

Change the background color of a button by adding the class .secondary, .success, .warning, or .alert to the outer <table> (or the <button> tag in Inky HTML).

HTML
<button href="#" class="secondary">Secondary Button</button>
<button href="#" class="success">Success Button</button>
<button href="#" class="warning">Warning Button</button>
<button href="#" class="alert">Alert Button</button>
<table class="button secondary">
  <tr>
    <td>
      <table>
        <tr>
          <td><a href="#">Secondary Button</a></td>
        </tr>
      </table>
    </td>
  </tr>
</table>
<table class="button success">
  <tr>
    <td>
      <table>
        <tr>
          <td><a href="#">Success Button</a></td>
        </tr>
      </table>
    </td>
  </tr>
</table>
<table class="button warning">
  <tr>
    <td>
      <table>
        <tr>
          <td><a href="#">Warning Button</a></td>
        </tr>
      </table>
    </td>
  </tr>
</table>
<table class="button alert">
  <tr>
    <td>
      <table>
        <tr>
          <td><a href="#">Alert Button</a></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

DEMO


Radius and Round

Creating buttons with a radius or rounded edges (like a pill) can be achieved by adding the .radius or .rounded class to a button.

Note - border-radius is not supported on Outlook 2000-2013, Yahoo! Mail, and Android 4+ (Gmail)

Note - In order to create .radius and .rounded buttons, the border needs to be removed.

HTML
<button href="#" class="radius">Radius</button>
<button href="#" class="rounded">Round</button>
<table class="button radius">
  <tr>
    <td>
      <table>
        <tr>
          <td><a href="#">Radius</a></td>
        </tr>
      </table>
    </td>
  </tr>
</table>
<table class="button rounded">
  <tr>
    <td>
      <table>
        <tr>
          <td><a href="#">Round</a></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

DEMO


Sass Reference

Variables

The default styles of this component can be customized using these Sass variables in your project's settings file.

NameTypeDefault ValueDescription
$button-padding Map tiny: 4px 8px 4px 8px
small: 5px 10px 5px 10px
default: 8px 16px 8px 16px
large: 10px 20px 10px 20px

Padding inside buttons at various sizes.

$button-font-size Map tiny: 10px
small: 12px
default: 16px
large: 20px

Font sizes of buttons at various sizes.

$button-color Color $white

Text color of buttons.

$button-color-alt Color $medium-gray

Text color of buttons with a light background.

$button-font-weight Weight bold

Font weight of buttons.

$button-margin List 0 0 $global-margin 0

Margin around buttons.

$button-background Color $primary-color

Background color of buttons.

$button-border Border 2px solid $button-background

Border around buttons.

$button-radius Number $global-radius

Border radius of buttons. Not supported by all email clients.

$button-rounded Number $global-rounded

Border radius of rounded buttons. Not supported by all email clients.