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.
<button href="#">Button</button><html>
<head></head>
<body>
<table class="button">
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td><a href="#">Button</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>DEMO
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.
<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><html>
<head></head>
<body>
<table class="button tiny">
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td><a href="#">Tiny Button</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="button small">
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td><a href="#">Small Button</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="button">
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td><a href="#">Default Button</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="button large">
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td><a href="#">Large Button</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>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.
<row>
<column>
<button href="#" class="expanded">Expanded Button</button>
<button href="#" class="small-expanded">Expand small only</button>
</column>
</row><html>
<head></head>
<body>
<table class="row">
<tbody>
<tr>
<column>
<table class="button expanded">
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td>
<center><a href="#" align="center" class="float-center">Expanded Button</a></center>
</td>
</tr>
</tbody>
</table>
</td>
<td class="expander"></td>
</tr>
</tbody>
</table>
<table class="button small-expanded">
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td><a href="#">Expand small only</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</column>
</tr>
</tbody>
</table>‍
</body>
</html>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).
<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><html>
<head></head>
<body>
<table class="button secondary">
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td><a href="#">Secondary Button</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="button success">
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td><a href="#">Success Button</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="button warning">
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td><a href="#">Warning Button</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="button alert">
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td><a href="#">Alert Button</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>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.
<button href="#" class="radius">Radius</button>
<button href="#" class="rounded">Round</button>
<html>
<head></head>
<body>
<table class="button radius">
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td><a href="#">Radius</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="button rounded">
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td><a href="#">Round</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>DEMO
Sass Reference
Variables
The default styles of this component can be customized using these Sass variables in your project's settings file.
| Name | Type | Default Value | Description |
|---|---|---|---|
$button-padding |
Map |
tiny: 4px 8px 4px 8px |
Padding inside buttons at various sizes. |
$button-font-size |
Map |
tiny: 10px |
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. |
