How to Create a Button in Email

Create a button that makes your subscribers want to click!

While it might sound difficult, you can actually get this done in just a few easy steps, and we'll walk you through it. Go to your Account tab, within your account, and then select Email Template. Let the button creation begin!

Select Your Template  

If you decide to use one of our provided ConvertKit templates, this will already include the button CSS. If, however, 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. 

ConvertKit Hint: 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: 

mMvr9b556j

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. 

ConvertKit Hint: 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="convertkit.com" class="button">A button to my site</a>

NinjsnbdUK


ConvertKit Hint: 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!

Have you joined our Slack Community yet? Jump in today and don't miss out on live updates!

Did you like this article? You might also enjoy Customizing Opt-In Forms

Still need help? Contact Us Contact Us