Aurora Button
A dark pill with slow northern lights drifting inside it and a twinkling spark icon, the look people expect from an AI action. Three soft radial blobs move on transform only, out of step.
Also known as: ai button css, ai button animation css, northern lights button.
HTML
<button class="btn-aurora" type="button"> <span class="btn-aurora-lights" aria-hidden="true"><i></i><i></i><i></i></span> <svg class="btn-aurora-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M10 3l1.9 5.6L17.5 10.5l-5.6 1.9L10 18l-1.9-5.6L2.5 10.5l5.6-1.9z"/><path d="M18.5 14l.9 2.6 2.6.9-2.6.9-.9 2.6-.9-2.6-2.6-.9 2.6-.9z"/></svg> Ask AI </button>
CSS
.btn-aurora {
--c: var(--btn-color, #3b82f6);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5em;
padding: 0.75em 1.6em;
border: 0;
border-radius: 0.6em;
font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
position: relative;
isolation: isolate;
overflow: hidden;
padding: 0.85em 1.9em 0.85em 1.6em;
border-radius: 2em;
background: color-mix(in srgb, var(--c) 16%, #070912);
color: #fff;
text-shadow: 0 0.05em 0.3em rgba(7, 9, 18, 0.6);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.14),
0 0.5em 1.4em -0.5em color-mix(in srgb, var(--c) 70%, transparent);
transition: transform 0.2s ease, box-shadow 0.3s ease;}
.btn-aurora-lights {
position: absolute;
inset: 0;
z-index: -1;
}
.btn-aurora-lights i {
position: absolute;
width: 7em;
height: 4.5em;
background: radial-gradient(closest-side, var(--l), transparent);
animation: btn-aurora-drift 6s ease-in-out infinite alternate;
}
.btn-aurora-lights i:nth-child(1) { --l: var(--c); --dx: 4em; --dy: 0.8em; top: -2em; left: -2.5em; }
.btn-aurora-lights i:nth-child(2) { --l: color-mix(in srgb, var(--c) 30%, #ec4899); --dx: -4.5em; --dy: -1em; right: -3em; bottom: -2.2em; animation-duration: 7s; animation-delay: -3s; }
.btn-aurora-lights i:nth-child(3) { --l: color-mix(in srgb, var(--c) 30%, #22d3ee); --dx: 3em; --dy: -1.2em; left: 10%; bottom: -3em; animation-duration: 5s; animation-delay: -1.5s; }
.btn-aurora-icon {
width: 1.2em;
height: 1.2em;
animation: btn-aurora-twinkle 2.4s ease-in-out infinite;
}
.btn-aurora:is(:hover, :focus-visible) {
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.3),
0 0.6em 1.8em -0.5em color-mix(in srgb, var(--c) 85%, transparent);
}
.btn-aurora:active { transform: scale(0.97); }
@keyframes btn-aurora-drift {
0% { transform: translate(0, 0) scale(1); }
100% { transform: translate(var(--dx), var(--dy)) scale(1.25, 0.9); }
}
@keyframes btn-aurora-twinkle {
0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.85; }
50% { transform: scale(1.15) rotate(20deg); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.btn-aurora, .btn-aurora *, .btn-aurora::before, .btn-aurora::after, .btn-aurora *::before, .btn-aurora *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--btn-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--btn-size. Every other dimension is inem, so the whole thing scales together. Currently previewing18px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.