<button class="aurora-btn">Aurora Effect</button><button class="aurora-btn">Aurora Effect</button>The Aurora Gradient Button is a premium, animated CSS button component featuring a continuously shifting six-color gradient that mimics the natural northern lights effect. Built with pure CSS using a single linear-gradient and the background-size technique, it produces a vivid color flow without JavaScript, GIFs, or external libraries. The default color palette transitions through purple, indigo, magenta, coral, blue, and cyan, creating an attention-grabbing yet professional appearance suitable for premium products, creative portfolios, and high-conversion call-to-action sections. On hover, the button gently lifts with a translateY transform and intensifies its colored shadow, providing tactile feedback to users. The 4-second animation cycle is slow enough to feel elegant rather than distracting. The button works equally well as a standalone primary action or embedded inside hero sections, pricing tables, and landing pages where visual hierarchy needs to direct the eye to a single conversion point.
The animation relies on a single CSS technique: oversize the gradient background and shift its position over time. The linear-gradient defines six colors at 45 degrees. Setting background-size to 300% 300% makes the gradient much larger than the button, and the aurora-shift keyframe animates background-position from 0% 50% through 100% 50% and back. This creates the illusion of colors flowing across the surface without rendering multiple frames. The 4s ease-in-out timing gives the motion an organic feel. On hover, a translateY(-2px) plus enlarged box-shadow with brand color tint creates a 3D lift effect that reinforces interactivity.
White text remains above the 4.5:1 WCAG AA threshold against all six gradient colors. For icon-only variants or when the button text is decorative, add an aria-label describing the action. The animation respects users who set prefers-reduced-motion if you wrap the animation in a media query — recommended addition for production use.
Uses widely-supported CSS features: linear-gradient, background-size, keyframe animations, and transforms. No vendor prefixes needed for browsers released after 2018.