HubSpot CTA: Doesn't Need To Be Sad and Boring
Default HubSpot CTA button styles can be pretty limiting, but they don’t have to be!
HubSpot CTA button code can be adjusted to do almost anything. This makes it really easy to bring a professional looking design to your HubSpot pages.
Take a look at these 5 Hubspot CTA’s with Rollover Effects, CSS Transitions, Hover Animations and unique styles. These buttons are all done with pure CSS. Which means there are even more fun possibilities when we look at HubSpot CTA image buttons.
If you see a button that you wish could be a CTA on your site, leave a comment and we will try and HubSpotify it for you and add it to our list.
Additional Design Resource: Adding Custom Styles to my CTA
Hover Square HubSpot CTA
See the Pen HubSpot Hover Effect Button by Joe Henriod (@joehenriod) on CodePen.
Pro Tip: HubSpot Techniques.
You may want to delete the “background-color: #0fc;" or change it to have it match your site.
Do not write your button text in the text editor. Hit the Source Code button “<>”, and then cut and paste this code. If you need to change the CTA text, make your edits in this mode or Hubspot will strip important information when you save.
If you wish to change the color of your link text, make that the last change you do. You can edit the color with the normal “Text Color” button in the Design panel. Your colors get set back to black every time you make a change in the Custom CSS panel, so you will need to do this again if you made any changes to the css.
The Fancy Click CTA
See the Pen Fancy Click Hubspot CTA by Joe Henriod (@joehenriod) on CodePen.
Pro Tip: HubSpot Techniques.
You may need to adjust or completely eliminate: “margin-top: 6%” so that the button is where you want it on the page. This line puts extra padding above the button.
Do not write your button text in the text editor. Hit the Source Code button “<>”, and then cut and paste this code. If you need to change the CTA text, make your edits in this mode or Hubspot will strip important information when you save.
If you wish to change the color of your link text, make that the last change you do. You can edit the color with the normal “Text Color” button in the Design panel. Your colors get set back to black every time you make a change in the Custom CSS panel, so you will need to do this again if you made any changes to the css.
Animated Transition with Text Reveal Hubspot CTA
See the Pen Animated Transition with Text Reveal Hubspot CTA by Joe Henriod (@joehenriod) on CodePen.
Pro Tip: HubSpot Techniques.
Do not write your button text in the text editor. Hit the Source Code button “<>”, and then cut and paste this code. If you need to change the CTA text, make your edits in this mode or Hubspot will strip important information when you save.
If you wish to change the color of your link text, make that the last change you do. You can edit the color with the normal “Text Color” button in the Design panel. Your colors get set back to black every time you make a change in the Custom CSS panel, so you will need to do this again if you made any changes to the css.
Hubspot Rollover and Click Effect CTA
See the Pen Hubspot Rollover and Click Effect CTA by Joe Henriod (@joehenriod) on CodePen.
Pro Tip: HubSpot Techniques.
Do not write your button text in the text editor. Hit the Source Code button “<>”, and then cut and paste this code. If you need to change the CTA text, make your edits in this mode or Hubspot will strip important information when you save.
If you wish to change the color of your link text, make that the last change you do. You can edit the color with the normal “Text Color” button in the Design panel. Your colors get set back to black every time you make a change in the Custom CSS panel, so you will need to do this again if you made any changes to the css.
Hubspot Red Pill vs Blue Pill inset click CTA
See the Pen Hubspot Red Pill - Blue Pill inset click buttons by Joe Henriod (@joehenriod) on CodePen.
Pro Tip: HubSpot Techniques.
Do not write your button text in the text editor. Hit the Source Code button “<>”, and then cut and paste this code. If you need to change the CTA text, make your edits in this mode or Hubspot will strip important information when you save.
If you wish to change the color of your link text, make that the last change you do. You can edit the color with the normal “Text Color” button in the Design panel. Your colors get set back to black every time you make a change in the Custom CSS panel, so you will need to do this again if you made any changes to the css.