Button color and hover color

Hi Vannessa! Can you send me the url of the page on your site where the plugin is being used? That will help me test some CSS for you to use.

Thanks

My website is https://threebearshomestaging.com/. Do you need the URL to the specific page I’m trying to create? I don’t have that active/published just yet. Do I need to do that first?

That would help, in case it’s some theme specific CSS that is making it harder to style.

Here’s what the CSS would look like if you want to give it a try:

.shop-page-wp-link {
    background-color: red;
    border-color: red;
    border-color: red !important;
}
.shop-page-wp-link a.buy-link {
    color: #fff;
}

You should try it first without using the !important tag, but you can use that if it doesn’t work at first.

And here for the hover:

.shop-page-wp-link:hover {
    background-color: green;
    border-color: green;
}

Thank you! It is getting closer (button color changed), but not quite there yet.

The background hover color won’t change (still showing black even when I put my brand hex code in). The hover boreder DOES change though.

Also would like to be able to change the button font color.

Thanks in advance for any additional help you can offer!

Still playing with the code. Was finally able to get the hover background to change, but it’s still doing this kind of weird thing when the mouse gets close to the button (but not quite “hovering” over it) where it swaps out my colors for black and white. As long as your mouse is directly on or off the product it doesn’t do it. I’m going to keep working with it, but appreciate any insight you can offer.

If you can make the plugin live on one page I can try doing it. And you can let me know what colors you are trying to use.

Yes, I can do that. Can I send you the link privately? If so, where should I send it?

Sure, you can email me at [email protected]

You can try this:

.shop-page-wp-link a.buy-link {
    color: #fff !important;

}
.shop-page-wp-link {
    box-shadow: inset 0 -3px 0 0 rgb(0 0 0 / 25%);
    border-radius: 9px;
    border: none !important;
    padding: 0.5em 1em !important;
}
.shop-page-wp-item:hover .shop-page-wp-link {
    background-color: #e94f1d !important;
}
.shop-page-wp-item .shop-page-wp-link:hover {
    background-color: #89d1ce !important;
}

I added a line for padding, but that’s optional. The 0.5em is top and bottom, the 1em is right and left.

Thanks! I just implemented the new code, but take a look. The 3d effect is great and colors are working but now the button disappears altogether (except for a bit of a shadow). Are you seeing that also?

You might need to combine this with some of the code you’ve already added.

.shop-page-wp-link {
    box-shadow: inset 0 -3px 0 0 rgb(0 0 0 / 25%);
    border-radius: 9px;
    border: none !important;
    padding: 0.5em 1em !important;
    background-color: #e94f1d !important;
}

This style will probably need the background color too.

I think adding the background color here fixes that.

Oh, and you can add font weight here:

.shop-page-wp-link a.buy-link {
    color: #fff !important;
    font-weight: bold;
}