chore: Update contributors.css styling for animation and button weight #7413
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Problem
The hover behavior for the "Load More" button within the
.box
element caused inconsistent UI behavior due to large size changes, which affected the overall visual appeal and responsiveness of the component.Solution
Adjusted the hover effect by changing the
font-weight
from 500 to 600 and adding a shadow effect to maintain a sleek and consistent appearance when the button is hovered.Changes Proposed
1.
Changedfont-weight
from 500 to 600 in the.box #loadMore:hover
selector to reduce the size difference and keep the UI stable during hover.2.
Addedbox-shadow: inset 120px 0 0 0 #fe0c43
to the hover state for a more subtle, professional animation.3.
Implementeddisplay: flex
withjustify-content: center
andalign-items: center
for the#animation
to center content and improve layout alignment.Other Changes