Make WordPress Core

#57988 closed enhancement (reported-upstream)

Global Styles: Allow to define hover color for buttons

Reported by: nielslange's profile nielslange Owned by:
Milestone: Priority: normal
Severity: normal Version:
Component: Editor Keywords:
Focuses: Cc:

Description

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.

Benefits

  • 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.
  • 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.
  • 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.
  • 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.
  • Aesthetic appeal: A well-designed hover effect can make your user interface more visually appealing and professional, creating a positive first impression for users.
  • 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.
  • Increased user satisfaction: A user-friendly interface that incorporates hover effects can lead to increased user satisfaction and a more enjoyable overall experience.
  • 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.

Attachments (3)

Screenshot 2023-03-27 at 16.31.47.png (71.9 KB) - added by nielslange 23 months ago.
Screenshot 2023-03-27 at 16.31.55.png (72.2 KB) - added by nielslange 23 months ago.
Screenshot 2023-03-27 at 16.32.04.png (123.1 KB) - added by nielslange 23 months ago.

Download all attachments as: .zip

Change History (6)

#1 @sabernhardt
23 months ago

  • Component changed from General to Editor
  • Version trunk deleted

#2 @kelvinballoo
23 months ago

I do agree. While there is a default hover colour change on the buttons, having the flexibility to change that will be more useful to the end user.
It could allow them to A/B test which can convert better as well.

#3 @nielslange
23 months ago

  • Milestone Awaiting Review deleted
  • Resolution set to reported-upstream
  • Status changed from new to closed

Given the nature of this request, I moved the issue to https://github.com/WordPress/gutenberg/issues/49608.

Note: See TracTickets for help on using tickets.