Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Add hover color to button with background gradient

  • 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,

  • Hi there,

    can you share a link to where i can see the button ?

  • 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.

  • 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)?

  • 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;
  • Thanks David, works pretty well 🙂

  • You’re welcome

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.