Keeping your HubSpot Call to Action's on Brand

So you have just got a beautiful new website and as part of your website you have these killer button styles. The font's are on brand, the colours are on brand, and you even get a nice interaction when you hover over it. 

The problem is, you want to start switching out some of these buttons for HubSpot Call to Action's (CTA's) so that you can start tracking your visitors actions to see what works and what doesn't, all of a sudden you go from something like this:

To this:

The issue is that you only have a handful of options on how to customise how the CTA looks and in this case, it falls a bit flat.

The good news is though, HubSpot has your back and they do give you the option to reuse your existing button styles, but if you're not a developer, it might just not be obvious how.

How to reuse your website's button styles for your HubSpot CTA's

With a few very simple steps, it is possible to apply your existing button styles to your CTA's but you do need to know one important thing first. The CSS class for your buttons.

Now, if you are reading this article as a marketer, you may be wondering, what is a CSS class? Think of it like a label. Your developer created that label, and then they wrote a set of rules for how a part of your website should look when it has that label applied to it. In the case of your buttons, there is a label (or CSS class) that when applied to a link, loads all of the necessary styles (or rules) to make that link look like a button. 

All you need to do is find out what that CSS class is, and then apply it to your button and voila, your CTA's look like buttons!

If you are not sure what the CSS class is for your website, or how to find it, it should be a very easy question for your developer to answer. If you just want to take a guess, some very common naming practices are button or btn.

How to apply a CSS class to a HubSpot CTA

Applying your class to a CTA is easy, just follow these simple steps:

1. Create a new CTA as normal
2. Enter the text for your CTA in the Button Content rich text area
3. In the Button style dropdown, select 'Link (No Style)' - this will remove all of the default styling for you
4. Expand 'Advanced options'
5. Enter the CSS class for your buttons in the 'Custom CSS class' field
6.  Click next and continue creating the CTA as normal

That's it! You will notice that the preview looks pretty boring. The one draw back to this approach is that HubSpot does not load your stylesheets in the CTA editor so you can't preview it from here but you will see it when you add it to your page.

Adding your CTA to a page

You can follow the normal process to add your CTA to a page. You may notice that when you first add it, it appears as an unstyled link like we saw when creating the preview but as soon as you click 'Apply Changes' on your module, the preview will refresh and you should see your button, complete with hover effects!

Taking it to the next level

Multiple Button Styles

Some websites may have multiple types of buttons, perhaps some in colour, some in white, or some that just have a border instead of a solid background. Each one of these will have slightly different CSS classes or perhaps even more than one class that has to be applied. For instance your main CSS class might be 'button' but to make it white, you can then add a second class of 'button--white'. If this is the case, you can just add both classes separated by a space into the 'Custom CSS class' field when editing your CTA like so:

Complex Hover Interactions

Sometimes the interactions seen when a user hovers over your button require some slightly more complex HTML to pull off which the default code generated by the CTA may not support.

In these cases, your developer can write some custom JavaScript to modify the HTML and apply the necessary changes. If you are doing this, it is important to note that the CTA's may be added to the page after the page is loaded so you have to ensure your code waits for them to load first before attempting to make your changes.

Summary

That's it, getting your CTA's on brand is as simple as knowing and applying the correct CSS class. By following these simple steps you can get your site back on brand and get the most out of HubSpot's incredible analytics tools at the same time!