Multiple styling for 1 CTA

[MMeirlevede]

Hi everyone!

I am just wondering if there is any possibility to adjust the style class in your direct hubspot page and not set it in the CTA itself. We use primary secondary and tertiary style classes. But we would like to keep the CTA's manageble.

Right now we have to make 3 CTA's for one download with each styling in the CTA. 

[JTBuys]

I develop custom themes for our clients. This is how we handle styling basic button CTAs. We create a "template" CTA draft similar to the above and clone it when creating CTAs. The HTML in the CTA matches our markup for our standard buttons including the classes. That way we can use the same CSS to style our button CTAs.

You can take this a step further and create HTML and CSS macros for your buttons. That way you can include branded buttons and button CTAs any where without needing to repeat code.

[evaldas · Accepted solution]

Hi @MMeirlevede 

If you would like to change the appearance of the CTA on the page without having to create multiple CTAs, then you may need to create a custom module. 

You would first set up the HTML version so that it is not styled.

Then, in the Design Manger, you can set up a very simple module that wraps the CTA and then you can have the matching CSS in your theme.

<div class="{{ module.cta_style }}">
  {% cta guid="{{ module.cta_field }}" %}
</div>

This would result in something like this when editing the page:

Hope this helps!