How to create a striking Call-to-Action in HubSpot
Calls to action (CTAs) are appealing buttons or links that you place strategically on your website pages to drive prospective customers to convert on landing page forms and become leads.
A CTA button should be visually striking and have copy that teases an enticing offer. Most businesses use CTAs to encourage a site visitor to complete a core user flow or conversion on their site. The two key CTAs that HubSpot uses on our homepage are the start a free trial and request a demo buttons. If you've read any of HubSpot's blog articles, or looked at some of our product marketing pages you will notice that we use CTA buttons very frequently.
HubSpot has made it incredibly easy for you to create your own stunning CTA buttons in seconds. Here's how!
1. Go to the Calls to Action dashboard
You can quickly get to the the Calls to Action dashboard within your HubSpot account by clicking on Content > Calls to Action in the main navigation.
2. Create a new Call to Action button
Click the Create a Call to Action button on the right side of the Call To Action dashboard.
3. Choose a name for your new CTA button
Click on the Call to Action Name field and type in a unique name for this CTA button.
4. Choose the button type
The CTA tool lets you build two different types of buttons. Buttons that are built using our Button builder interface and buttons that are built from one of your Custom images.
- Buttons built with our button builder have editable text, click animations, and custom colors and fonts.
- Buttons built from one of your custom images allow you to create buttons in image editing programs such as Adobe Photoshop or Microsoft Paint and collect analytics.
This guide will teach you how to build a button using our Button builder, but if you would like to learn how to build a button using your custom image follow this guide.
5. Choose the CTA button style
Click on the Button Style dropdown and then choose one of the default styles.
The default button styles all have appealing click effects when you click on them in this preview or on a website page. We add new default button styles every few months to the CTA tool.
6. Choose the font Size
Click on the Font Size dropdown and choose the font size for your CTA's text. The Button Size is also set to automically scale depending on the font size.
7. Choose the font
Click on the Font dropdown and choose the font style for your CTA's text.
8. Choose the button color
Click within the Button Color field and then choose the primary color for this CTA button using the color picker, RGB value, HSB value, or HEX value. If the button style you selected has a secondary color or shadow, we automatically pick a complementary color for you.
When selecting a color for a CTA button it is important to think about the general colors of the page that you are going to be placing the CTA on so that you can pick a color that contrasts and is immediately visible to a website visitor. The more the CTA button stands out visually from the rest of the content on a website page, the more likely it will capture your visitor's attention.
9. Choose the font color
Click within the Font Color field and then choose the font color for the CTA's text.
It is important to choose a color that contrasts with your button's color choice so that is legible on a variety of computer monitors.
10. Choose the CTA button size
The Button Size is set to automatically adjust to the Call to Action Text, but you can set a custom width and height by unchecking the set automatically checkbox.
The preview displays the size of the finished button and the pixel dimensions. The example below is has a 244 pixel width and a 60 pixel height.
11. Choose the CTA button's text
Click within the Call to Action Text field to edit the copy of your CTA button. When writing the copy, follow these best practices:
- Make it clear what the offer is: A user clicks a CTA because they're interested in what it offered. If they reach your landing page and it doesn't immediately follow up on that expectation, you'll lose them. If your landing page is all about a Free ROI Analysis, make sure that's what your CTA is advertising.
- Make it action-oriented: Begin with a verb like "download" or "register" that makes it very clear what action site visitors will be taking on the subsequent landing page.
Advanced Tips for Formatting CTA Button Text
- You can make the text multiline by hitting the return key on your keyboard.
- With default button styles, the Call to Action Text is automatically used as alt text for your button.
- If you want to add some extra flair to your copy (Like in the example below), you can use HTML Symbol Entities or Special ALT Characters (a numeric keypad works best for ALT characters) within this field.
- The font style is not editable with any of the default styles within the tool to ensure that the buttons are visually consistent, but a CSS savvy designer can modify the font styling on a finished webpage by targeting the .hs-cta-wrapper, .hs-cta-node and .cta_button classes with custom css rules and !important tags.
12. Enter the Destination URL for the CTA
Click within the Destination URL field and type in the URL of the target landing page you want the CTA to redirect to when it is clicked on.
If you are linking to one of your HubSpot hosted landing pages, you can use the Your pages dropdown to easily select on of them. If you have more than five HubSpot landing pages created, you will have the option to search within the Your pages dropdown.
You can check the Open in separate window checkbox if you want the target landing page to open in a new window when the CTA button is clicked on. This option is usually used if you are linking to a landing page that is not on the same domain.
13. Finish creating your CTA button
To finish creating your CTA button click on the Create CTA button at the bottom of the dialog.
14. Review your new CTA button
Once you've created your new CTA button you can preview it on the CTA dashboard. To learn how to measure the success of your CTA buttons using this dashboard, read Measure the success of your CTA buttons.
To see how to remove your CTA, view Step 5 of this article.