Skip to content

Comments

feat(button): added focus, hover, and active global states to buttons in app.css & linked to app.jsx#18

Merged
magali-la merged 1 commit intomainfrom
feat/button-component
Oct 31, 2025
Merged

feat(button): added focus, hover, and active global states to buttons in app.css & linked to app.jsx#18
magali-la merged 1 commit intomainfrom
feat/button-component

Conversation

@magali-la
Copy link
Collaborator

🎯Type of Change:

  • Feat ✨: New feature or functionality.

This PR...

Adds global focus, active, and hover states to all buttons in App.css and links the stylesheet to App.jsx


📝 What I Did:

  • Added focus outline per design specs, accounting for outline thickness by subtracting it from the button's padding
  • Added hover color before active color to properly show the blue active color on click instead of a persistent hover color

🧪 How to Test:

  1. Open the Netlify preview for this PR or git checkout feat/button-component
  2. Use tab navigation to observe the focus ring on each button across pages
  3. Verify that hover and click have the correct color styling across pages

🤔 What I learned:

Learned that order matters when creating hover and active states in css files, so as to not have the hover color persist even upon click.

… active states in app.css and import app.css into app.jsx
@netlify
Copy link

netlify bot commented Oct 29, 2025

Deploy Preview for mint-chip ready!

Name Link
🔨 Latest commit 8a090ab
🔍 Latest deploy log https://app.netlify.com/projects/mint-chip/deploys/6902974b3b5ffc0008c4ea8e
😎 Deploy Preview https://deploy-preview-18--mint-chip.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@CMolinaBetancourt
Copy link
Collaborator

The component works perfectly.

@magali-la magali-la merged commit 1e96287 into main Oct 31, 2025
5 checks passed
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.

3 participants