Title: Is there a Button Hover Effect?
Last modified: July 16, 2023

---

# Is there a Button Hover Effect?

 *  Resolved [Ram Freedman](https://wordpress.org/support/users/ramf/)
 * (@ramf)
 * [2 years, 10 months ago](https://wordpress.org/support/topic/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](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](https://wordpress.org/support/users/jordesign/)
 * (@jordesign)
 * [2 years, 10 months ago](https://wordpress.org/support/topic/is-there-a-button-hover-effect/#post-16899506)
 * Hey [@ramf](https://wordpress.org/support/users/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](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://wordpress.org/plugins/](https://wordpress.org/plugins/) –
   but here’s a couple of examples I found which look like they might help:
    - [https://wordpress.org/plugins/button-block/](https://wordpress.org/plugins/button-block/)
    - [https://wordpress.org/plugins/image-hover-effects-ultimate/](https://wordpress.org/plugins/image-hover-effects-ultimate/)
 *  Thread Starter [Ram Freedman](https://wordpress.org/support/users/ramf/)
 * (@ramf)
 * [2 years, 10 months ago](https://wordpress.org/support/topic/is-there-a-button-hover-effect/#post-16900666)
 * Hi [@jordesign](https://wordpress.org/support/users/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](https://wordpress.org/support/users/zoonini/)
 * (@zoonini)
 * [2 years, 10 months ago](https://wordpress.org/support/topic/is-there-a-button-hover-effect/#post-16903766)
 * Hi [@ramf](https://wordpress.org/support/users/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:
 *     ```wp-block-code
       /* 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.](https://wordpress.org/documentation/article/styles-overview/#site-wide-custom-css)
 * 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](https://wordpress.org/support/users/ramf/)
 * (@ramf)
 * [2 years, 10 months ago](https://wordpress.org/support/topic/is-there-a-button-hover-effect/#post-16904127)
 * Hi [@zoonini](https://wordpress.org/support/users/zoonini/) 
   Thanks for providing
   the CSS code – I will give it a go.
 *  Thread Starter [Ram Freedman](https://wordpress.org/support/users/ramf/)
 * (@ramf)
 * [2 years, 10 months ago](https://wordpress.org/support/topic/is-there-a-button-hover-effect/#post-16905888)
 * Hi [@jordesign](https://wordpress.org/support/users/jordesign/) and [@zoonini](https://wordpress.org/support/users/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](https://wordpress.org/support/users/zoonini/)
 * (@zoonini)
 * [2 years, 10 months ago](https://wordpress.org/support/topic/is-there-a-button-hover-effect/#post-16906480)
 * 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](https://wordpress.org/support/users/ramf/)
 * (@ramf)
 * [2 years, 10 months ago](https://wordpress.org/support/topic/is-there-a-button-hover-effect/#post-16906584)
 * [@zoonini](https://wordpress.org/support/users/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.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/twentytwentythree/1.6/screenshot.
   png)
 * Twenty Twenty-Three
 * [Support Threads](https://wordpress.org/support/theme/twentytwentythree/)
 * [Active Topics](https://wordpress.org/support/theme/twentytwentythree/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/twentytwentythree/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/twentytwentythree/reviews/)

 * 8 replies
 * 3 participants
 * Last reply from: [Ram Freedman](https://wordpress.org/support/users/ramf/)
 * Last activity: [2 years, 10 months ago](https://wordpress.org/support/topic/is-there-a-button-hover-effect/#post-16906584)
 * Status: resolved