- Posts
The specific issue is that because of the color palette I have chosen, and the color of the background image I have chosen, the call-to-action button appears washed out and does not immediately catch the eye. What I’d like to do is shift the way the palette colors are called for that specific item. Use the dark grey to fill the button normally (with white text), and then use the green to fill the button on hover (again with white text).
Looking at the specific text code of the Call-to-action button I see that:
<div class=”row call-to-action-wrapper”>
<div class=”col-md-12″>
<div class=”call-to-action”><a class=”button-primary” href=”https://referral.ameritox.com/PriumMain/”>Make a Referral</a></div>
</div>
</div>There are a number of div classes defined and a primary button defined elsewhere that is being called upon. Because I want to change specifically just the colors of one button, will I need to define a new button class specifically for this? If so where should I navigate to do that?
hcope,
Thanks for the question! There are a few color classes you could apply to modify that element if you want it to retain it’s ability to change with the color palettes.In the “Hydra” theme you can navigate in the customizer to “Widgets > Below Primary Navigation > Visual Editor: Call To Action” to edit the markup for that button.
for example on your button-primary:
<a class=”button-primary” href=”https://referral.ameritox.com/PriumMain/”>Make a Referral</a>Using the color classes in BoldGrid for the properties on the button to change can be done like this:
<a class=”button-primary color3-background color1-background-hover color1-border-color color3-border-color-hover color1-color color3-color-hover” href=”https://referral.ameritox.com/PriumMain/”>Make a Referral</a>The color# corresponds with the color in the selected palette. So adding the classes above would give your button a grey background, white text, and a white border. On hover it would give the background a white background, grey text, and grey border. Some of the supported properties for elements are: color, background, background–color, and border–color.
Otherwise, you can of course create your own style for that button as well. Custom CSS can be added through the customizer as well by going to “Advanced > Custom JS & CSS > Custom Theme CSS -> Open Editor” to put in your own custom styles.
- The topic ‘How do I change colors of the CTA button?’ is closed to new replies.
