Differentiate CTA Classes

Search Best Practices - Search Front-End
1

My client would like to differentiate the 2 CTAs to have 2 different colors.

image
image1163×302 18.4 KB

One needs to be yellow and one gray.

It seems that the color is given from the class “HitchhikerCTA js-HitchhikerCTA”
So i feel in this case I would have to differentiate between class
HitchhikerCTA js-HitchhikerCTA-primaryCTA
and
HitchhikerCTA js-HitchhikerCTA-secondaryCTA

I have tried to do so in the location card template.hbs but I have not been able to succeed.

Could you advise how to do so?

Thank you.

Lucas B.

2

Hi Lucas,

You’re on the right track. Inspect the HTML so you can see how the classes are differentiated and nested.

The following CSS will work to target the background color of the primary CTA. You can repurpose this to add the styling you need.

.HitchhikerLocationStandard-primaryCTA {
    .HitchhikerCTA {
      background-color: #EEE;
    }
  }
2 Likes