<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=771842102927617&amp;ev=PageView&amp;noscript=1">

How to Develop Killer HubSpot CTAs

Untitled-8 Learn More
View Topics  

Updated By: Tony Strack on Wed, May 10, 2017

Calling All Actions!

A CTA or Call-to-Action is defined by HubSpot as: “...a button or link that you place on your website to drive prospective customers to become leads by filling out a form on a landing page.”

CTAs are typically found on regular content pages. It provides a link to a landing page with a higher value offer, thus channeling the user down the buyer’s journey.

But what makes a CTA stand out? What makes people want to click it? Well, there's a variety of things from the offer, to the placement, to the design. I'm here to help you with design – making a CTA that really stands out and gets those clicks.

 

Customizing Your CTA

Alright, this is what you're here for. To learn how to make a kickass CTA. HubSpot’s CTA tool can be found in your dashboard under Content > Calls-to-Action. This is where you can view your current CTAs as well as create/update existing. And that’s what we’re here to do.

Let's first start by clicking the Create CTA button in the top right. This will bring up a dialog for the creation of a new CTA.

kickass-ctas-info.png

On the information tab pictured above, you can enter a descriptive name for the CTA, add a campagin, and choose where the CTA will link to. At the bottom, you’ll also see a preview of the CTA you’re creating. At this point, it’s pretty basic, but we’ll get to that.

The next tab is Design.

kickass-ctas-design.png

Here you can find tools to customize the CTA. There are two main options here – Custom Button and Image Button. An Image Button is as expected – you upload an image, add some alt text, and that’s pretty much it. The Custom Button is far more advanced. Below it, you can see a few options such as background color, padding, and the rich text editor with its array of options. The button I’d like to dig into is the Customize CSS button.

First things first, let’s go to the Style dropdown and select ‘Link (No Style)’. But, what!? This disables all of the customization options! No worries, we’re going to use CSS to customize the CTA. This will give us far more control than what you see here. So, go ahead, hit that boring old Customize CSS button.

Bam!

kickass-ctas-css.png

 

Another tab! Oh man, it’s beginning to look more like my Chrome browser. Don’t fret, this is the last of the tabs and the most glorious of them all. The first thing I like to do is copy the code from the left pane (Auto Generated CSS) and paste it in the right pane (Custom CSS). This will be our boilerplate for the CTA code. I also added a couple lines of code that I always add to this boilerplate – display, white-space and box-sizing.

kickass-ctas-css-3.png

Now, this playground is all yours. Take that plain jane text link and make it one that can’t help but be clicked. With CSS, the possibilities are endless. Here is a couple of examples of some CTAs I’ve created, along with a snippet of the code.

CTA Example: Button with Hover

The Code:
a#cta_button_745374_19d8577c-113a-458d-8a59-1970c40a0c4f {
    display: inline-block;
    box-sizing: border-box;
    padding: 15px 30px;
    background: #0099cc;
    border: 2px solid #0099cc;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    white-space: inherit;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
}
a#cta_button_745374_19d8577c-113a-458d-8a59-1970c40a0c4f:hover {
    background: transparent;
    color: #0099cc;
}
The Result:
Download this Offer

CTA Example: Image Background with Supporting Text and Button

a#cta_button_745374_0b2aead6-6c47-4146-aea2-be96fcf07b40 {
    display: block;
    box-sizing: border-box;
    padding: 60px;
    background: -webkit-linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url('https://cdn2.hubspot.net/hub/745374/hubfs/Stock%20images/people%20in%20bokeh,%20street%20of%20London.jpeg') 50% no-repeat;
    background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url('https://cdn2.hubspot.net/hub/745374/hubfs/Stock%20images/people%20in%20bokeh,%20street%20of%20London.jpeg') 50% no-repeat;
    background-size: cover;
    text-align: center;
    text-decoration: none;
    white-space: inherit;
}
a#cta_button_745374_0b2aead6-6c47-4146-aea2-be96fcf07b40 h2 {
    margin: 0;
    color: #fff;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    font-size: 32px;
    font-weight: bold;
    text-transform: uppercase;
}
a#cta_button_745374_0b2aead6-6c47-4146-aea2-be96fcf07b40 p {
    margin: 15px 0 30px 0;
    color: #fff;
    font-family: 'Georgia', serif;
    font-size: 18px;
}
a#cta_button_745374_0b2aead6-6c47-4146-aea2-be96fcf07b40 button {
    position: relative;
    top: 0;
    display: inline-block;
    padding: 15px 30px;
    background: #43da8d;
    border: 0;
    border-radius: 5px;
    box-shadow: 0 4px #3aa76f;
    color: #fff;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    white-space: inherit;
    -webkit-transition: all .1s ease;
    transition: all .1s ease;
    -webkit-appearance: none;
}
a#cta_button_745374_0b2aead6-6c47-4146-aea2-be96fcf07b40 button:hover {
    top: 2px;
    box-shadow: 0 2px #3aa76f;
    color: #fbfbfb;
    cursor: pointer;
}
Want to know how to make kick-ass CTAs?  Click below to find out how to make a CTA that can't help but to be clicked Click Here to Find Out!

Tips & Tricks

  • You can also insert media queries in the code to make your CTAs fully responsive and looking good on all of your favorite devices.
  • Test one template, make sure it's rock solid, then you clone it and create more!
  • Don't forget to prefix! I've had good luck using this tool to ensure the CTA looks good across all modern browsers.
  • Avoid extra HTML markup. Just use your headers, paragraphs, and buttons wisely.

 

The HubSpot CTA world is your oyster. Now go out there and push the envelope!

Get Your Website Some Action  Your site can work harder. We have the data to prove it. Request Your Free Data Report
Tony Strack

About The Author

Tony Strack

With a passion for clean, fast and modern websites, I continue to research the latest trends and push the envelope to stay at the forefront of modern web design. As the front-end web developer for Leighton Interactive, I utilize my knowledge of HTML, CSS and JavaScript to develop beautiful, dynamic websites. In my spare time you can find me enjoying the great outdoors - camping, hiking and kayaking. Inside you’ll find me engulfed in music or watching football.

Comments

Subscribe to Our Blog

Share This Post

  
Request a Free Website Audit