HubSpot's CTA builder provides you with the necessary tools for customizing your Calls-To-Action. By working under the Information and Design tabs within the tool, you can seamlessly adjust the look of your CTAs. If you were interested in changing more advanced features, such as hover effects, you can take it a step further and custom edit the CSS styles.
HubSpot implements Auto Generated CSS styles to the CTA you are building, which can be altered through the Custom CSS box, located next to it. Follow the instructions below to learn how to change the hover effects through editing the Custom CSS styles.
1. Navigate to the CTA builder to create a new CTA
2. Under the Design tab, click the "Customize CSS" button
3. Scroll down in the Auto Generated CSS box to locate the styles and ID name of your CTA for the hover effect. It will look similar to this: a#cta_button_###_###:hover.
4. Copy and paste your CTA ID into the Custom CSS box located next to the Auto Generated CSS box. (Note: While you cannot edit the Auto Generated CSS directly, the edits you make in the Custom CSS box will update the styles.)
5. Edit the CSS with the corresponding hover effect changes you would like. For example, if I wanted to have the background color change to black when hovered over, I would insert the code depicted below.
6. Hover over your CTA to see the adjestments you've made. If satisfied, click "Update CTA" to save your changes.
7. You've successfully changed the hover effects of your Call-To-Action using custom CSS!
You can made additional changes to your hover effects including box-shadow or borders. The key is to remember to include your unique Call-To-Action ID and hover selector when customizing the CSS!