Improve home page Create button styling with glass morphism effect

[Copilot]

Overview

Replaced the default Adobe Spectrum button on the homepage with a custom glass morphism button design, creating a modern and visually appealing interface.

Changes

• Created a new reusable GlassButton component with TypeScript support
• Implemented glass morphism styling with:
  • Semi-transparent background with backdrop blur effect
  • Translucent border for the frosted glass appearance
  • Smooth hover animations with glowing box shadow
  • Shine effect that sweeps across the button on hover
  • Subtle press-down feedback on click
• Updated Homepage.tsx to use the new glass button component

Visual Preview

Normal state:

Hover state with glow effect:

Technical Details

The glass button uses modern CSS features including:

• backdrop-filter: blur(10px) for the glass effect
• Layered box shadows for depth and glow
• CSS pseudo-element (:before) for the shine animation
• Smooth transitions for all interactive states

The implementation is minimal and focused, changing only what's necessary to achieve the desired styling while maintaining full functionality of the Create button.

Fixes #[issue_number]

Original prompt

---

This section details on the original issue you should resolve

<issue_title>improve home page create button styling</issue_title>
<issue_description>Make it look like the glass button here: https://codepen.io/DenDionigi/pen/JodwNzX</issue_description>

Comments on the Issue (you are @copilot in this section)

Fixes #122

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
lyrictor-qvte	Ready	Preview	Comment	Oct 7, 2025 9:31pm