Fix: Add hover effects and interactive states for Profile and Logout buttons

[nishitha011]

Related Issue

Closes #436

Summary

Added interactive hover effects to the Profile and Logout buttons to improve visual feedback and user experience. The buttons now respond to user interactions with smooth animations, elevation effects, and color transitions.

Changes Made

• Added smooth transition effects to .profile-btn
• Added hover state with:
  • Background color change
  • Slight scale animation
  • Elevation/shadow effect
• Added active state for button press feedback
• Added focus state for better keyboard accessibility
• Improved overall button responsiveness and UI consistency
• Added optional distinct hover styling for Logout button

Testing

Tested locally by:

1. Running the application using npm start
2. Opening the navigation bar containing Profile and Logout buttons
3. Hovering over both buttons
4. Verifying:
   • Background color changes on hover
   • Smooth transition animations work correctly
   • Shadow/elevation effect appears
   • Slight scaling animation is visible
   • Cursor changes to pointer
   • Focus outline appears during keyboard navigation
5. Confirmed behavior works correctly

Checklist

• Code follows project style
• Tested locally
• No unrelated changes included
• Documentation updated (if applicable)