Is there a Button Hover Effect?

  • Hi,
    I am currently working on my WordPress website and would like to implement a button hover effect that changes both the button color and the button text color when users hover over the button.

    I would like to enhance the visual interactivity of buttons on my WordPress website by implementing a hover effect. Specifically, I want the button’s background color to change to a different color, and the button text color to also change simultaneously when users hover over the button with their mouse cursor. This effect will provide a clear visual indicator that the button is interactive.

    The effect should trigger when users hover over the button with their mouse cursor and revert back to the original colors when the cursor is no longer hovering over the button.

    Something like this:
    https://codepen.io/brownerd/pen/wWOOqj

    Is there such an option in the Twenty Twenty-Three them?
    Thanks!
    Ram

Viewing 7 replies - 1 through 7 (of 7 total)
  • Moderator jordesign

    (@jordesign)

    Hey @ramf – I know exactly the kind of thing you need. It’s something planned for the WordPress Editor – but there’s not a way to do it yet.

    If you’re interested in following the progress of that being added – you can track it in this Github Issue here:
    https://github.com/WordPress/gutenberg/issues/4543

    This is a situation where a plugin might come in handy. You can search the available plugins at https://www.ads-software.com/plugins/ – but here’s a couple of examples I found which look like they might help:

    Thread Starter Ram Freedman

    (@ramf)

    Hi @jordesign
    Thanks for your help – I see that this issue is opened from 2018 and I don’t think that it will be added soon.

    It looks that the plugins you mentioned do exactly what I need – but I’m really trying to build my site with minimal plugins and modification so I try to use only the WordPress Editor / Twenty Twenty-Three theme.

    I guess I will wait until it will be incorporated to the WordPress Editor directly.

    Thanks!
    Ram

    Moderator Kathryn Presner

    (@zoonini)

    Hi @ramf, for now you can use custom CSS to add a button hover style. If you want to target all buttons, something like this should do the trick:

    /* Button hover */
.wp-block-button__link:hover {
    background-color: #4ccee6;
    color: #bb00bb;
}

    You can add your custom CSS to the built in site-wide CSS editor in WordPress 6.2.

    If you want to target only specific buttons on your site, and not all of them, you would need to add a unique custom CSS class in the Additional CSS class panel on the specific button blocks you want to affect, and adjust your custom CSS to match your new class. Just let me know if you need help with that.

    Thread Starter Ram Freedman

    (@ramf)

    Hi @zoonini
    Thanks for providing the CSS code – I will give it a go.

    Thread Starter Ram Freedman

    (@ramf)

    Hi @jordesign and @zoonini,
    I noticed something interesting – it turn out that there is some kind of Button Hover Effect as part of the theme – If I add a button without changing the colors etc – I get a basic hover effect.

    I can’t control it (i.e. set the color I want etc) – but as long as I use the theme default (that I can set) there is a built in hover effect as part of the theme.

    Moderator Kathryn Presner

    (@zoonini)

    Yes, that’s right. ?? I think Jordan and I both assumed you were looking to customize the hover colour to your own, which isn’t yet possible in the editor. Glad you’re all set.

    Thread Starter Ram Freedman

    (@ramf)

    @zoonini I do really want to do that ??
    But in the meantime I will use what I can.
    Thanks for your help.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Is there a Button Hover Effect?’ is closed to new replies.