How to Create a Button in Email

While we don't have a "button" option on our email editor toolbar, it's really easy to add one to your email! Here are the steps!

First, you want to add some CSS to your email template, to adjust how your button will look.

Hint: if you use one of our done-for-you email templates found here, this already includes the button CSS. If you are building a template from scratch, you'll add the code separately, as I describe below!

Here is what the code below looks like:

Screenshot 2016-06-07 13.09.59

Button CSS

 .button {
 border: none;
 background: #777;
 color: #fff;
 padding: 10px;
 display: inline-block;
 margin: 10px 0px;
 font-family: Helvetica, Arial, sans-serif;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
 text-decoration: none;
 }
 
 .button:hover {
 color: #fff;
 background: #666;
 }

This gets added to your template, between the <style> </style> tags. Note if hover isn't working, add an !important next to the background color i.e. background #666 !important;

Please also note that note all email providers or clients support CSS for hover and in general it may not be good practice to implement this.

mMvr9b556j

Change the Button Color

The background color of the button can be changed with the background: #777; line. You will change "#777" to the hex code of the color you want. If you don't know your color's hex code, try a tool like ColorZilla to find it.

The text color of the button can be changed with the color: #fff; line. You will change #fff to the hex code of the color you would like.

Common Hex codes:

White: #fff

Black: #000

Grey: #777

Check out more here.

Button HTML

This gets added to your individual email, in the HTML Editor.
<a href="convertkit.com" class="button">A button to my site</a>

NinjsnbdUK

In the email editor, it will just look like a link. This is because the template style isn't applied until you Preview the email.

Customize the button link

Replace convertkit.com with your domain, or the domain you'd like the button to redirect to. Make sure to use the quotes!

Change "A button to my site" to the button text you would like.

Common uses for an email button

Create a "Buy Now!" button for your product

1. Paste the Button HTML into your email editor.

2. Add the link to your product or sales page to the HTML.

3. Change the Button text.

4. OPTIONAL: Change the button color to match your sales page (you may want to create a specific "sales" template if you like multiple button colors)

Turn a button into a Link Trigger

1. Insert your Link Trigger in your email from the Link Trigger menu.

2. Open up the HTML Email Editor and find the Link Trigger HTML.

3. Add class="button" between the trigger id and the closing >.

4. Return to the Visual Editor and click the link. If it has a lightning bolt, your link trigger is set up correctly!

Still need help? Contact Us Contact Us