Button

Bulletproof, responsive buttons images - even in Outlook.

Inkcite’s {button} helper makes it easy to add bulletproof, responsive CTAs to your email that look great in every email client.

Usage

Example Inkcite markup:

 {button id="..." href="..."}SHIP MY PANTS{/button}

An example of the resulting email HTML output:

 <a href="..." style="text-decoration:none" target=_blank>
  <table align=center bgcolor=#0099cc border=0 cellpadding=8 cellspacing=0 class="fill" style="border-radius:5px;mso-padding-alt:8px 8px 8px 8px;width:175px" width=175>
    <tr>
      <td align=center style="padding:8px;text-shadow:0 -1px 0 #003d52"><a href="..." style="color:#99ffff;text-decoration:none" target=_blank>SHIP MY PANTS</a></td>
    </tr>
  </table>
</a>

Inkcite’s markup is 87% shorter than conventional HTML.

Attributes

Attributes in bold are required.

bevel: When present, specifies the size, in pixels, of a border that appears along the bottom of the button
bevel-color: When bevel is specified, this is the color of the button’s bottom bevel
bgcolor: Specifies the background color for this button
border: Specifies the CSS border for this button
border-radius: Specifies the border radius, in pixels, for this button
color: Specifies the button’s foreground text color
float: Controls the alignment of this button
font: Indicates that this font style (family, size, line height, etc.)should be applied to the button
font-family: Sets the family of font(s) that should be used for the button label
font-size: Sets the size of the font on this button
font-weight: Sets the weight of the font used on this button
force: When present forces the link to be considered valid and Inkcite won’t try to validate the syntax/warn you if it is an invalid link.
height: Specifies the height (in pixels) of this button
href: The destination URL when this button is clicked
id: The unique ID corresponding to this button’s href
letter-spacing: Specifies the letter spacing of the font on this button
line-height: Specifies the line height of the font on this button
no-tag: When present disables link tagging for this button, if global link tagging is enabled for the email
padding: Specifies the padding (in pixels) between the text on the button and its border
text-shadow: When present, causes a 1px shadow to appear under the text on the button in the color specified
width: Specifies the width (in pixels) of this button

Project Config

Set the default values for all {Button} Helpers by setting these attributes in helpers.tsv:

button-width

Sets the width (in pixels) of all buttons in this email

button-color

Specifies the foreground text color for all buttons in the email

button-float

Specifies the alignment of all buttons in the email

button-padding

Specifies the padding (in pixels) for all buttons in the email

button-height

Specifies the height (in pixels) of all buttons in the email

button-font

Controls the font style for all buttons in the email

button-bgcolor

Specifies the background color for all buttons in the email; alias button-background-color

button-border

Specifies the CSS border for all buttons in the email

button-border-radius

Specifies the border radius for all buttons in the email

button-font-family

Specifies the name of the font(s) that will be used on all buttons in the email

button-font-size

Specifies the size of the font for all buttons in the email

button-line-height

Specifies the line height for all buttons in the email

button-font-weight

Specifies the weight of the font to be used on all buttons; eg bold

button-letter-spacing

Specifies the letter spacing on all buttons in the email

button-bevel

Specifies the size, in pixels, of the bottom bevel on all buttons in the email

button-text-shadow

Specifies the color of the 1px shadow for all buttons on the email

button-bevel-color

Specifies the color of the bevel for all buttons in the email

Documentation

Helpers