Add Button Hover Color options on Button Block

[monika-12]

Enhancement Overview
Add Hover options for button like hover background hover color and hover text color.

Expected Behavior
There is no option to add hover color on button so there should be option for Background Hover Color and Hover Text Color.

Screenshots / Video

[karmatosed]

Could we just have a rule of whatever color, the hover should be a little darker?

[monika-12]

I think the hover color should be a little darker than base color.

[karmatosed]

@monika-12 yes I agree and let's get this worked on now we have design feedback.

[alexandersamson]

.wp-block-button__link:hover{ background:#3A3A3A !important; }
This is what I've added to custom theme CSS. Affects all buttons in that class. For now it works fine for me. The !important is important for override purposes, because for some strange reason somewhere else the background has been set already at :hover.

[planetahuevo]

@karmatosed do you know if this has been deployed? I cannot find any docs about hover for buttons in Gutenberg.
thanks!

[paaljoachim]

Hey

I am rechecking this issue.
Using Twenty Twenty One.
WordPress 5.6.
Gutenberg plugin version 9.8

As can be seen hover has not yet been added. Kjell linked to this issue (right above)
#27075

[Gtarafdar]

Is there any chance to have an option to add customized color in button hover color! For example, I want to add different hover colors rather than the light, darker version of the primary button color.
Sorry, please don't mind; other page builders have those features in default. Or you can check other third-party addons like stackable: https://wpstackable.com/button-block/

ultimate blocks: https://ultimateblocks.com/improved-button-block/

I really appreciate any help you can provide.

[paaljoachim]

Thank you for adding your comment @Gtarafdar
I have shared the issue with @aaronrobertshaw . Aaron has added the issue to the list of things he is working on.

[Gtarafdar]

Ahh. Thanks a lot. I was waiting for a long. Because only for that feature I have to use another addon. Any ETA @paaljoachim, my brother.

[aaronrobertshaw]

Thanks for the ping @paaljoachim. I am currently working on adding block support for custom colors along with UI refinements around that. This will be a great use case to trial that new functionality.

[mtias]

This should be covered by #43088.

[AmazingBV]

@mtias This is actually not covered in that issue. In #43088 there is only a solution to add the default styling for pseudo-elements, not a solution to change pseudo-elements styling in Gutenberg on the (for example) core/button block itself. My opinion is that this issue should be reopened and fixed.

[bahiirwa]

Running WordPress 6.2 and latest Gutenberg plugin. #43088 allows me to set default button elements styling but I cannot change individual buttons in the admin of the editor.

[Gtarafdar]

Hello @mtias , as you have said, it should be covered by #43088. And that issue seems merged with 6.2. But unfortunately, I failed to find the feature as we have been looking for four years in WP 6.2. :( no button hover styling option in the editing panel.

Can you please guide us to where we share the feature request? Thanks in advance.

[paaljoachim]

I will ping
@MaggieCabrera @scruffian and @mikachan so that we can get some feedback on questions from @bahiirwa and @Gtarafdar

[MaggieCabrera]

Yes, I think this issue needs to be reopened. #43088 only adds the ability to change the hover styles for buttons via theme.json. If memory serves, I believe we need design input as to how to properly surface the controls in the UI for the end user.

[paaljoachim]

There is an issue I believe where @jasmussen and @jameskoster have been experimenting with hover effects.

It looks like I found the main issue:
Standardized way to modify interactive states (:hover, :focus .etc) for blocks
#38277

Here are various other associated issues I came across as I was searching.
Implicit Text, Hover, Focus Colors as Part of Color Palette
#34717

Outline button does not take on the theme.json styles of the filled button
#47260

Hover effect color not fully covered in block editor link control search item
#45720

Hover color over image block
#33939

[MaggieCabrera]

Thanks for compiling those! I wonder if now that we also have box shadow controls, those should also be considered for hover effects. But I digress. I'm happy to work on the UI for this if we have design consensus.

[Gtarafdar]

Thanks a lot @paaljoachim. Appreciate that.
Thanks for reopening the thread again @MaggieCabrera. If you need collaboration in the UI mockup I love to collab.

[MaggieCabrera]

I talked about this with @richtabor today, and he advised to start off with the same way we are implementing it for the link element on Global Styles and extend that to the button:

I went to check, and I don't think we have space for the hover tab, we would need to change the component to add the arrows, right?

[richtabor]

I went to check, and I don't think we have space for the hover tab, we would need to change the component to add the arrows, right?

The control hierarchy would be to pick between "Default" or "Hover". Then select the colors for Text and Background (Background could have "Solid" and "Gradient" fills)—but there shouldn't be two tab components on top of each other. 🤔

[jameskoster]

Does it seem a bit restrictive to enable state management only on specific controls? 🤔

I feel like continuing to explore #38277 might reveal fertile ground.

[richtabor]

I feel like continuing to explore #38277 might reveal fertile ground.

I agree. This isn't quite in a place to move forward with development.

[Jabe64]

Moreover, additional space will be needed in the future to add icon block inside button block. See #16513 and #16484 for more information.

[richtabor]

This is being explored holistically as part of #38277.

Let's close this to maintain focus on standardizing interactive states across the board.

[jabeztadesse]

+1