How do I customize my CTA / button styles?

Creating consistent button styles across your website is easy with Clean Pro.  

You can create up to five unique button styles:

• Primary (cta-primary)
  This is the call to action that should leap off the page and smack the visitor in the face (in the gentlest most loving way possible of course)
• Secondary (cta-secondary)
  This button style should have less visual weight than your primary but still, be clearly called out on the page.
• Tertiary (cta-tertiary)
  This button style can blend in a bit more.  Perfect for a LEARN MORE button or those buttons that don't lead a visitor down a conversion path.
• Fourth (cta-four)
  Simply another option should you need it.
• Fifth (cta-five)
  Simply another option should you need it.

How to style your buttons:

The first thing you're going to want to do is access the theme settings by editing any of the web pages.  If you're setting up your website for the first time, I suggest creating a page utilizing the Style Guide template.

When in the theme settings access the /// Call to Actions section. There you'll see the five styles mentioned above.

Simply go into each of the styles and edit the properties for your desired look and feel.

Form Button Styles:

It's important to note that you can style the buttons included in HubSpot forms in the same way. All you need to do is go to the main Theme Settings view and click /// Forms.  Then you'll see two options for form submit buttons.

In many of the Clean Pro modules where you're able to include a form, there is also an option to utilize the Alt version of the submit button. This is great in the case you have a form on a dark or light background making the standard submit button hard to see.