necolas
Add Hover Effects to Links and Buttons on the Main Web Page
Is there an existing request?
- [x] I have searched for this request
Describe the feature request
✨ Proposal: Add Hover Effects to Links and Buttons on the Main Web Page
🎯 Objective: Enhance the user interface and interactivity of the React Native for Web landing page by adding subtle hover effects to the "Documentation" button and all anchor () links, especially those like “official template on CodeSandbox”.
🔘 Button Hover Effect (Documentation Button) Current Style: Solid blue with white text. Proposed Effect:
css
button { background-color: #007bff; color: white; border: none; padding: 10px 20px; border-radius: 6px; transition: background-color 0.3s ease, transform 0.2s ease; }
button:hover { background-color: #0056b3; transform: scale(1.05); cursor: pointer; } ✅ This adds a slight zoom-in and darker blue on hover.
🔗 Link Hover Effect (e.g., “official template on CodeSandbox”) Current Style: Basic blue link. Proposed Effect:
css
a { color: #61dafb; /* react-blue for branding consistency */ text-decoration: none; transition: color 0.3s ease, text-decoration 0.3s ease; }
a:hover { color: #21a1f1; text-decoration: underline; } ✅ This keeps branding style, while providing a clearer hover indication and better accessibility.
🔍 Benefits Clearer visual feedback for users
Helps distinguish interactive elements
Adds polish and professional UI feel
Improves accessibility and usability
