:root { --color-primary: #8b5cf6; --color-secondary: #3b82f6; } .animated-button { position: relative; overflow: hidden; background: linear-gradient( 135deg, var(--color-primary) 0%, var(--color-secondary) 100% ); transition: transform 0.3s ease, box-shadow 0.3s ease; } .animated-button:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 20px 40px rgba(53, 100, 176, 0.6); } .animated-button span { position: relative; z-index: 1; transition: color 0.3s ease; } /* Shimmer effect */ .animated-button::after { content: ""; position: absolute; top: -50%; left: -100%; width: 50%; height: 200%; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.3), transparent ); transform: skewX(-20deg); z-index: 2; pointer-events: none; } .animated-button:hover::after { animation: shimmer 1.5s ease-in-out; } @keyframes shimmer { 0% { left: -100%; } 100% { left: 200%; } }