sebastjan/videofolxtv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add gradient underline animation on hover for navigation links

Browse Source 
Update the Home page component to include a new span element for each Link. This span is styled to create a gradient underline that animates to full width on hover, utilizing Tailwind CSS classes and React.js state management for transitions.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 890577b1-c154-40a4-a177-a0c6d55320c3
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/890577b1-c154-40a4-a177-a0c6d55320c3/2xHHKQn
This commit is contained in:
sebastjanartic 2025-09-01 20:42:45 +00:00
parent 5cba0b1c97
commit 1d1c76652e
1 changed files with 4 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
client/src/pages/home.tsx
View File

@ -81,11 +81,13 @@ export default function Home() {
{/* Desktop navigation */}
<div className="hidden md:flex items-center space-x-6">
<nav className="flex space-x-6">
<Link href="/" className="text-bunny-light hover:text-bunny-blue transition-colors">
<Link href="/" className="relative text-bunny-light hover:text-bunny-blue transition-colors group">
Home
<span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-purple-400 via-blue-500 to-purple-600 transition-all duration-300 group-hover:w-full"></span>
</Link>
<Link href="/folx-stadl" className="text-bunny-light hover:text-bunny-blue transition-colors">
<Link href="/folx-stadl" className="relative text-bunny-light hover:text-bunny-blue transition-colors group">
FOLX STADL
<span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-purple-400 via-blue-500 to-purple-600 transition-all duration-300 group-hover:w-full"></span>
</Link>
</nav>