HubSpot Ideas

Stephanie-OG

Ability to add CSS Classes to CTA <a> element from HubL/Custom Module

On the CTA tool, there's a "Custom CSS class" option under "Advanced options" that allows users to add CSS classes that are then applied to the <a> element. I would like for that same option to be available when using the CTA field in a custom module or the CTA HubL tag

 

The extra_classes parameter works, but it adds the classes to the span surrounding the CTA and not the <a> element itself.

 

{% cta guid="{{ module.cta }}" extra_classes="blue-button" %}

 

This is ok, but it means that in the stylesheet you need to add in two selectors: 

 

.cta_button.blue-button,
.cta-wrapper.blue-button a.cta_button {
  background-color: blue;
}

 

Use case: currently, if the user has a CTA "Contact Us" and would like to display it in three different colours, they need to create three different CTAs in the CTA Tool to assign each one a class.

 

If the class can be added from a custom module, then they can use the same CTA and adjust its colour at the page level.