Topic: Add hover color to button with background gradient

[email protected]
November 15, 2023 at 5:48 am

Hi,

I use the GP buttons with the native background-gradient feature as a global style.

How can I add a single color as hover color to this gradient button?
I tried some CSS hacks as additional CSS in the advanced section. But nothing worked out.

Do you have any idea for me?

Thanks in advance,
Matthias
David
November 15, 2023 at 7:25 am

Hi there,

can you share a link to where i can see the button ?
[email protected]
November 15, 2023 at 9:38 am

Hi David,

Here’s a link to see the buttons: https://epr-compliance.eu/global-button-test/
David
November 15, 2023 at 10:26 am
Ah your gradient is using one of the themes CSS colors.

So you could do this:

1. give the button a CSS Class of: gradient-button

2. Add this CSS:
```
.gradient-button:hover {
    --primary: #f00;
}
```
What that does is swaps the --primary color value just for that button on hover.

If both colors in the gradient were a CSS variable color then you could do both.
[email protected]
November 15, 2023 at 11:27 am
It works quite well with the Primary color code:
```
.gradient-button:hover {
    --primary: #065299;
}
```
But can you please advice how the CSS should look like, if I also want to swap the second color of the gradient which is a CSS code (#0957CB)?
David
November 15, 2023 at 3:37 pm
1. Go to Customizer > Colors and add another global color for the 2nd gradient color.
For the example we will call it gradient-start

This will create a. CSS variable of --gradient-start: #f00;

Then you can update the CSS:
```
.gradient-button:hover {
    --primary: #065299;
    --gradient-start: #00f;
}
```
[email protected]
November 15, 2023 at 11:18 pm

Thanks David, works pretty well 🙂
David
November 16, 2023 at 1:52 am

You’re welcome

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Add hover color to button with background gradient