AI Sparkle Shimmer Button
A dark pill button with a bright glint orbiting its 1px border and a pair of sparkles that twinkle as the glint passes the icon. A rotating conic gradient masked to the button edge.
Also known as: ai button css, ai sparkle button, shimmer border button, generate with ai button.
HTML
<button class="aia-sparkle-shimmer-button" type="button">
<span class="aia-sparkle-shimmer-button-edge" aria-hidden="true"></span>
<svg class="aia-sparkle-shimmer-button-icon" viewBox="0 0 24 24" aria-hidden="true">
<path class="aia-sparkle-shimmer-button-big" d="M12 2C12.6 7.6 16.4 11.4 22 12C16.4 12.6 12.6 16.4 12 22C11.4 16.4 7.6 12.6 2 12C7.6 11.4 11.4 7.6 12 2Z"/>
<path class="aia-sparkle-shimmer-button-small" d="M19 1.5c.2 1.8 1.2 2.8 3 3-1.8.2-2.8 1.2-3 3-.2-1.8-1.2-2.8-3-3 1.8-.2 2.8-1.2 3-3Z"/>
</svg>
Generate with AI
</button>CSS
@property --aia-sparkle-shimmer-button-a {
syntax: "<angle>";
inherits: true;
initial-value: 0deg;
}
.aia-sparkle-shimmer-button {
--c: var(--aia-color, #7c5cff);
font-size: var(--aia-size, 16px);
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
line-height: 1.4;
--t: 3.2s;
position: relative;
display: inline-flex;
align-items: center;
gap: 0.55em;
padding: 0.85em 1.4em 0.85em 1.15em;
border: 0;
border-radius: 99em;
font-weight: 600;
letter-spacing: -0.005em;
color: #fff;
background:
radial-gradient(80% 120% at 50% 130%, color-mix(in srgb, var(--c) 45%, transparent), transparent 70%),
linear-gradient(180deg, #1c1c22, #0e0e12);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0.7em 1.6em -0.7em color-mix(in srgb, var(--c) 80%, transparent);
cursor: pointer;
animation: aia-sparkle-shimmer-button-orbit var(--t) linear infinite;
transition: box-shadow 0.25s ease, translate 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.aia-sparkle-shimmer-button:hover {
translate: 0 -0.08em;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 0.9em 2em -0.7em color-mix(in srgb, var(--c) 95%, transparent);
}
.aia-sparkle-shimmer-button:focus-visible { outline: 2px solid var(--c); outline-offset: 0.2em; }
.aia-sparkle-shimmer-button-edge {
position: absolute;
inset: 0;
border-radius: inherit;
padding: 0.09em;
background: conic-gradient(from var(--aia-sparkle-shimmer-button-a), transparent 0 62%, color-mix(in srgb, var(--c) 55%, #fff) 76%, #fff 82%, color-mix(in srgb, var(--c) 55%, #fff) 88%, transparent 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.aia-sparkle-shimmer-button-icon {
width: 1.2em;
overflow: visible;
}
.aia-sparkle-shimmer-button-big,
.aia-sparkle-shimmer-button-small {
fill: color-mix(in srgb, var(--c) 45%, #fff);
transform-box: fill-box;
transform-origin: center;
animation: aia-sparkle-shimmer-button-twinkle var(--t) cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
.aia-sparkle-shimmer-button-small {
fill: #fff;
animation-delay: calc(var(--t) * -0.92);
}
@keyframes aia-sparkle-shimmer-button-orbit {
to { --aia-sparkle-shimmer-button-a: 360deg; }
}
/* The glint passes the icon at about 70% of the orbit, so the sparkle flares there. */
@keyframes aia-sparkle-shimmer-button-twinkle {
0%, 60%, 100% { scale: 1; rotate: 0deg; }
70% { scale: 1.3; rotate: 45deg; }
82% { scale: 0.92; rotate: 90deg; }
90% { scale: 1; rotate: 90deg; }
}
@media (prefers-reduced-motion: reduce) {
.aia-sparkle-shimmer-button,
.aia-sparkle-shimmer-button-big,
.aia-sparkle-shimmer-button-small { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
.aia-sparkle-shimmer-button, .aia-sparkle-shimmer-button *, .aia-sparkle-shimmer-button::before, .aia-sparkle-shimmer-button::after, .aia-sparkle-shimmer-button *::before, .aia-sparkle-shimmer-button *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--aia-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--aia-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - 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.