Aurora Gradient Button
<button class="aurora-btn">Aurora Effect</button>About Aurora Gradient 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.
When to use
- Hero section primary CTA buttons on landing pages and product launches
- Premium plan upgrade buttons in pricing tables to emphasize the featured tier
- Newsletter signup and waitlist forms where visual impact drives conversions
- Creative portfolio sites and design agencies showcasing visual capability
- Web3, NFT, and crypto product call-to-action buttons matching the aesthetic
How it works
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.
Accessibility
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.
Browser support
Uses widely-supported CSS features: linear-gradient, background-size, keyframe animations, and transforms. No vendor prefixes needed for browsers released after 2018.
Related components
Frequently asked questions
Aurora Gradient Button
<button class="aurora-btn">Aurora Effect</button>What is inside Aurora Gradient Button
Aurora Gradient Button is a CSS button built with a keyframe animation, gradient fills, transforms, defined in 21 lines across 3 selectors.
Techniques used
Animation defined: aurora-shift
CSS properties in this component
animationbackgroundbackground-positionbackground-sizeborderborder-radiusbox-shadowcolorcursorfont-weightpaddingtransformtransitionAccessibility check2 to fix
- Built on a native <button> element, so keyboard focus and screen reader semantics work without extra attributes.
- No focus style is defined. Add one before shipping, or keyboard users lose track of position.
- Animates without a prefers-reduced-motion guard. Wrap the animation in that query if motion sensitivity matters to your audience.
These notes are generated by reading this component's own source, so they describe what it actually does rather than what a template says. Copy the code above in HTML, CSS, Tailwind and adapt it freely.