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.
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.
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.
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.
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.