Last updated: June 12, 2024
Available with any of the following subscriptions, except where noted:
Marketing Hub
Professional
,
Enterprise
|
Content Hub
Professional
,
Enterprise
|
| Legacy Marketing Hub Basic |
Use HubSpot’s advanced options for CTAs (legacy) to create highly customized CTA buttons that fit perfectly with your website theme. You can use a custom CSS class to support custom class inputs from your stylesheet or add custom CSS directly to the CTA.
To further customize your CTA (legacy), learn how to edit your CTA size. If you're adding your CTA (legacy) to an email or template, learn how to center your CTA.
Please note: custom styles can only be applied to custom buttons and not image buttons.
To add a custom style to your button CTA:
- In your HubSpot account, navigate to Marketing > CTAs.
- In the top left, click the dropdown menu and select CTAs (legacy).
- Hover over a CTA and click Actions > Edit, or click Create CTA.
-
In the right panel, scroll down and click Advanced options.
- You can apply custom CSS styling to your CTA using only either the Custom CSS class or the Custom CSS option. If both options are applied, it may result in issues with your CTA styling or display.
- Custom CSS Class: add a custom class to your CTA to support custom class inputs. This is useful when multiple CTAs across your website pages need to share a similar set of design characteristics, such as font families, sizing, or even padding and margins. If you use a custom CSS class, ensure that the class is included and styled in the CSS stylesheet applied as the main style for your HubSpot pages.
- Custom CSS: add custom styles to apply to the CTA you are editing only. In the Custom CSS field, you can apply inline styling specific to that CTA. If you have an element of the CTA you would like to change, add a new style declaration here before saving your changes.
- At the bottom right, click Next > to finish creating or editing your CTA (legacy).
