Global Styles: Allow to define hover color for buttons

[nielslange]

Problem

Currently, Global Styles allow defining both the default and the hover color for links. For buttons, however, only the default color can be defined. It’s not possible to define the hover color.

Steps to reproduce

1. Open the Global Styles settings via Appearance » Editor.
2. Go to Styles » Colors » Links.
3. Verify that link colors can have both a default and a hover color.
4. Go to Styles » Colors » Buttons.
5. Verify that button colors can only have a default, but not a hover color.

Screenshots

Link » Default:

Link » Hover:

Button:

Benefits

1. Improved usability: Changing the hover color provides visual feedback to users when they interact with buttons, making it easier for them to understand which element is active and clickable.
2. Enhanced accessibility: A clearly defined hover color can make the interface more accessible for people with visual impairments or color blindness, as it helps to differentiate between interactive and non-interactive elements.
3. Consistent branding: Customizing the hover color of buttons to match your brand's color scheme contributes to a consistent and cohesive design, which can improve users' perception of your product or website.
4. Increased engagement: An engaging and interactive user interface, which includes hover effects, can encourage users to explore and interact with your content, potentially increasing conversion rates or user retention.
5. Aesthetic appeal: A well-designed hover effect can make your user interface more visually appealing and professional, creating a positive first impression for users.
6. Reduced user errors: By providing clear visual cues, a defined hover color can help users avoid clicking the wrong button or misunderstanding the interface, reducing the likelihood of errors.
7. Increased user satisfaction: A user-friendly interface that incorporates hover effects can lead to increased user satisfaction and a more enjoyable overall experience.
8. Compliance with design standards: Following established web design standards, including the use of hover effects, ensures that your website or application meets the expectations of most users, leading to a better overall experience.

[kathrynwp]

Great idea, but I think this is a duplicate of #4543 - closing in favour of the older one.

[nielslange]

Thanks for closing this one, @kathrynwp. I was looking for an existing issue, but couldn't find #4543. 🙈