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:
- Navigate to Content > Calls-to-Action.
- Click the blue button to Create a CTA (or edit an existing button in your CTA list) > click the Design tab in the editor interface > and click the Customize CSS button 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.
- Using the Custom CSS box, it is also easy to apply inline styling specific to the CTA that’s being edited. If you have an element of the CTA that 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 the design of your CTA that is already implemented in the Auto Generated CSS section, you'll want to navigate back to the Design tab and choose Link (No Style) under the Style dropdown, 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).