HubSpot’s new CSS design tab makes it easy for designers to create highly customized CTA buttons within HubSpot that fit perfectly with any website theme.
To access these tools in your account, follow the instructions below:
- In your HubSpot Marketing Basic, Professional or Enterprise account, navigate to Content > Calls-to-Action.
- Click Create a CTA in the upper right-hand corner (or edit an existing button in your CTA list).
- In the dialog box, select the Design tab in the editor interface. Then click Customize CSS to open the CSS design tab.
- The Auto Generated CSS box is a read-only preview box that makes it easy to see which styles are being applied to specific CTA elements based on the current CTA’s design configuration.
- If you’d like to add a custom class to your CTA, the CSS Class box supports custom class inputs. This can be useful when multiple CTAs across your website pages need to share a similar set of design characteristics, like font families, sizing, or even padding and margins. If you are going to use a custom CSS class, please be sure to implement it, and any corresponding styling, within the CSS stylesheet being applied as the main style for your HubSpot pages.
- In the Custom CSS box, you can apply inline styling specific to the CTA that’s being edited. If you have an element of the CTA you would like to change, simply add a new style declaration in the Custom CSS box before saving the changes.
- If you plan to change a part of your CTA's design that's already implemented in the Auto Generated CSS section, navigate back to the Design tab and choose Link (No Style) under the Style dropdown menu; otherwise, the changes you make in the Custom CSS section will not be able to override what is already set.
- To fully update the CTA on live pages, you will then need to click on Update CTA (or Create CTA if you're working on a new CTA).