Buttons need hover, active, and focus states

[jffng]

Describe the bug
Currently the buttons do not have hover, active, or focus states. Also it looks like their font weight is incorrect.

Screenshots

Current	Desired

[jffng]

Related upstream issue: WordPress/gutenberg#27075

[jffng]

I started working on this a bit in the theme, and it helped to outline the considerations.

Use cases to consider

• User adjusts padding at the global level
• User adjusts padding at the block level
• User adjusts colors
• User selects the outline button style

Challenges

• The design uses a border in its hover state. We want to maintain consistent visual spacing between hover and resting states, i.e. the dimensions of the button shouldn't change between hover / resting. Ideally the default size of the button is the same between non-outline and outline buttons too. To do this, we need to calculate the padding value since it is different in hover vs resting state, and it depends on the border width.
• Global styles supplies padding values in-line when they are block-level customizations, but the styles are compiled into the .wp-block-button__link class when they are global customizations. Theme provided CSS is loaded after these customizations, making creating the right level of CSS specificity a challenge if we want to provide a default and allow for the user to make global customizations to the button padding. See Global Styles: consider loading user styles after theme styles gutenberg#34141 for more context

[kjellr]

Just a heads up that Gutenberg support for button hover states is no longer planned for 5.9, so we'll need to make a call about whether or not to build something into the theme.

I'll sum up my current thoughts here:

• Overall, I'm not supportive of any complicated workarounds. Unfortunately, most theme-specific button CSS has historically been pretty complicated.
• We've tried a number of solutions already (Add button hover styles #162, Add simple version of button hover state #163, Try a really simple button hover state #168) and none feel satisfactory yet.
• @jffng and I are also weighing the option of not including hover states at all (as described in Add Button Hover Color options on Button Block gutenberg#4543 (comment)). I don't love this approach either.

I haven't made up my mind one way or another yet, but in general, it seems clear that we have a bunch of non-ideal options to choose from.

[carolinan]

It is so much easier to only style one button. The other variations can be deregistered 🤐

[paaljoachim]

Can we perhaps get it into a WP 5.9.1 theme update instead?

[kjellr]

We haven't updated this in a while, so just adding a few notes from various slack conversations:

• @jffng and I have been leaning towards not adding button hover states. The previous explorations linked above have all been too complicated, or haven't looked great. Users will able to add their own hover states when Gutenberg supports this.
• We've had mixed signals on whether or not that would be ok from an a11y perspective though. On one hand, WCAG does not require hover states for buttons. But on the other hand, it's better to do it. Also, these are actually just links styled up to look like buttons.
• If we did implement something, maybe a simple opacity change would take care of this and also not interfere too much with future Gutenberg features.