[Feature] Buttons Lack Hover Reactions - Poor User Experience

[mo-gbolahan]

Problem

Buttons Lack Hover Reactions - Poor User Experience

Description

The buttons on the page do not have any visual feedback when hovered over. This lack of reaction reduces the interactivity and overall user experience (UX).

Steps to Reproduce:

1. Navigate to the page with buttons (mention the exact page/component).
2. Hover over any button.
3. Observe that there is no visual change (e.g., color change, shadow, or animation).

Recommendation: Implement a hover effect, such as:

• Changing the button color or adding a subtle shadow when hovered.
• Using a smooth transition to improve the user experience.

[Dev-JoyA]

@TimidRobot kindly see the status for this issue, it is "ready for work".
let me know the next step to take , if i should create another PR with the correct guidelines ???

[TimidRobot]

@Dev-JoyA, yes it has 🏁 status: ready for work Ready for work .

The next step I recommend is to propose a solution here in the issue. Once a potential solution is selected, it can be implemented in a pull request.

[Dev-JoyA]

@TimidRobot, I recommend the following for the search repository:

1. Create a button class that defines the default style for all buttons.
2. Implement a hover selector to slightly change the button color on hover, providing visual feedback.
3. Add a selector for the active state of buttons, incorporating an animation effect to simulate a click reaction and enhance interactivity.

[Dev-JoyA]

@TimidRobot @possumbilities I also recommend the changes should be done upstream, that is added in vocabulary.css so all other website can have access to the functionality .

Can i go ahead with this ??

[possumbilities]

After further review I wanted to clarify that adding hover effects seems like something we need to do in Vocabulary, particularly within the vocabulary.css file.

I'm going to move this to 🚧 status: blocked Blocked & therefore, not ready for work because I believe changes will occur with less fragmentation if they are made in Vocabulary concisely and then as each implementation project (like this one) gets the newer vocabulary.css file they'll automatically get these downstream adjustments.