Enhance buttons with modern styling, hover effects, and transitions #25

[suryaprakash0010]

✨ Upgraded Language Selection Buttons with Modern Styling #25

Description

Upgraded all language selection buttons with modern, professional styling that includes advanced hover effects, smooth transitions, and improved visual appeal while maintaining full accessibility and responsiveness.

---

🎯 What's New

Enhanced Button Features:

• Gradient Backgrounds: Beautiful purple-blue gradients (#667eea to #764ba2) that reverse on hover
• 3D Effects: Subtle shadows and depth with box-shadow for a professional appearance
• Smooth Animations: cubic-bezier transitions for fluid motion effects
• Interactive States: Hover, active, and focus states with different visual feedback
• Ripple Effect: Expanding circle animation on hover using CSS ::before pseudo-element

📱 Responsive Design:

• Mobile-First: Optimized spacing and sizing for all screen sizes
• Flexible Layout: Improved button container with max-width constraints
• Adaptive Sizing: Buttons scale appropriately on tablets and mobile devices

♿ Accessibility Improvements:

• Keyboard Navigation: Proper focus states with visible outlines
• Reduced Motion: Respects prefers-reduced-motion for users with motion sensitivity
• High Contrast: Special styling for prefers-contrast: high users
• Screen Reader Friendly: Maintains semantic HTML structure

🎨 Visual Enhancements:

• Modern Typography: Improved letter spacing and font weights
• Rounded Corners: Increased border-radius for softer, modern appearance
• Color Harmony: Consistent gradient themes across main buttons and footer links
• Enhanced Footer: Updated creator link with matching gradient styling

---