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>
<table class="button">
<tr>
<td>
<table>
<tr>
<td><a href="#">Button</a></td>
</tr>
</table>
</td>
</tr>
</table>
DEMO
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.
<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
.
<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).
<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.
<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.
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. |