A button is a great way to highlight an important call to action in your email. You can set them up quickly and easily in your ConvertKit emails! 

Select Your Template

If you decide to use one of our provided ConvertKit templates, this will already include the button CSS. (Except in the Text Only template option!) If you're feeling more adventurous, and you're building a template from scratch, you'll add the code separately. Here's what you'll need:

Button CSS

This is the code that you will paste into your template! Copy it here:

 .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; (Bolded for emphasis.) Remember that not all email providers or clients support CSS for hover, and in general, it may not be good practice to implement this.

You can see where to copy and paste this code below:

Change the Button Color

Background color

The background color of the button can be changed with the background  #777; line. (Bolded for emphasis.) You will change "#777" to the hex code of the color you want.

Note: If you don't know your color's hex code, try a tool like ColorZilla to find it! These are usually easy to find, and even easier to implement into your emails!

Text Color

The text color of the button can be changed with the color: #fff; line. (Bolded for emphasis.) 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="http://convertkit.com" class="button">A button to my site</a>

Note: 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. To really see it in action, send yourself a real, live email!

Customize the button link

You want your button to do the work for you, so these are two edits you'll want to make:

First, replace convertkit.com with your domain, or the domain to where you'd like the button to take your Subscribers. Make sure to use the quotes! Remember that anything you can click on, you can edit. Next, change the text on the button to say what YOU want!

Common uses for an email button

Just in case you'd like a bit of inspiration, we've got you covered! Here are a few common uses for that handy button, in your email:

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. (Remember to make it sound like you!)

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 >. (Bolded for emphasis.)

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

Creating a Custom HTML Email Template

Did this answer your question?