Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: Update contributors.css styling for animation and button weight #7413

Closed
wants to merge 1 commit into from
Closed

Conversation

Dewansh07
Copy link

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. Changed font-weight from 500 to 600 in the .box #loadMore:hover selector to reduce the size difference and keep the UI stable during hover.
  • 2. Added box-shadow: inset 120px 0 0 0 #fe0c43 to the hover state for a more subtle, professional animation.
  • 3. Implemented display: flex with justify-content: center and align-items: center for the #animation to center content and improve layout alignment.

Other Changes

  • Refactored the CSS for clarity and consistency across the stylesheet.
  • Updated hover effects for better user experience and responsiveness.

@Dewansh07 Dewansh07 closed this Oct 1, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant