Changing background colour of specific CTA buttons

Hi,
I would like to change the background colour of only specifically chosen Call to Action buttons on this page (and other places on my site).
I would like all of the “learn more” buttons on this page:
http://luciterradance.com/index.php/works/
to have a solid gold background (#eaab2b) and when hovered on to change to a transparent background.

I have seen other threads on this, but only for changing the CTA buttons on the entire site, not specifically selected ones.

Thank you in advance for your help!

Gillian

Hello Gillian,

It looks like you have made some button hover modifications. Can you please describe them?

Kind Regards, Roman.

Hi Roman,

I’m sorry but I took over managing this site from someone else and I am not sure what modifications he’s made. Where would I find that out? I have the Custom CSS plugin with many added lines of code - would it be in there somewhere perhaps?

Possibly this?

div#panel-555-3-1-1 h3.widget-title,
div#panel-555-3-1-2 h3.widget-title {
    color: #000000;
    font-size: 20px;
}

Hi again
I have just done some digging around and have figured out how to have the buttons be gold.
The issue is that I want some of the buttons (i.e. the 4 jump anchor links at the top of this page: http://luciterradance.com/index.php/works/ ) to be a different colour than the items farther down the page.

Thanks for your help!

Hello Gillian,

What exactly you want to change in those four buttons?

Kind Regards, Roman.

I would like the 4 buttons at the top of the page (and all other buttons with a similar function on other pages on my site) to be transparent with a charcoal (#2c2b2b) border and font and to fill charcoal with white font on hover.

Thank you!

Hello Gillian,

Please try to use the following CSS code in order to change buttons on the page mentioned above. I’m not sure what other buttons you want to change, can you please specify them as well?

You can add CSS code in DashboardAppearanceCustomizeAdditional CSS (WordPress 4.7 and up). Also you can add CSS code directly to style.css file of your child theme.

#pg-962-1 a.roll-button.border {
    color: #2c2b2b;
    background-color: transparent;
    border-color: #2c2b2b;
}

#pg-962-1 a.roll-button.border:hover {
    color: white;
    background-color: #2c2b2b;
}

Kind Regards, Roman.

Thanks so much!
I’d also like to do the same to the two buttons at the top of this page:
http://luciterradance.com/index.php/classes/
And, I will have more similar cases like this coming up shortly since I am in the process of creating a few new pages at the moment. Shall I just return to this thread again when I am ready with the next pages?

Greatly appreciate the help!

Gillian

Hello Gillian,

Please try to use this CSS code instead of previous:

#pg-962-1 a.roll-button.border,
#pg-822-1 a.roll-button.border {
    color: #2c2b2b;
    background-color: transparent;
    border-color: #2c2b2b;
}

#pg-962-1 a.roll-button.border:hover,
#pg-822-1 a.roll-button.border:hover {
    color: white;
    background-color: #2c2b2b;
}

Yes, you can return to this topic later.

Kind Regards, Roman.

You’re the best!

Thanks! :slight_smile: