Starfield Button
A deep space pill with two layers of stars drifting past at different speeds, for parallax, over a faint nebula glow. Each layer is a tile of radial-gradient dots that slides by exactly one tile.
Also known as: galaxy button css, space button animation, starry night button.
HTML
<button class="btn-starfield" type="button">Explore the galaxy</button>
CSS
.btn-starfield {
--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.9em 2em;
border-radius: 2em;
background:
radial-gradient(ellipse 60% 100% at 30% 140%, color-mix(in srgb, var(--c) 75%, transparent), transparent 70%),
radial-gradient(ellipse 50% 90% at 85% -40%, color-mix(in srgb, color-mix(in srgb, var(--c) 40%, #d946ef) 45%, transparent), transparent 70%),
color-mix(in srgb, var(--c) 14%, #04050c);
color: #fff;
letter-spacing: 0.02em;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.14),
0 0.45em 1.2em -0.4em color-mix(in srgb, var(--c) 60%, transparent);
transition: transform 0.2s ease, box-shadow 0.3s ease;}
.btn-starfield::before,
.btn-starfield::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
z-index: -1;
width: calc(100% + var(--tile));
background-size: var(--tile) 100%;
animation: btn-starfield-drift 14s linear infinite;
}
.btn-starfield::before {
--tile: 8em;
background-image:
radial-gradient(circle at 6% 24%, rgba(255, 255, 255, 0.85) 0.06em, transparent 0.11em),
radial-gradient(circle at 19% 72%, rgba(255, 255, 255, 0.6) 0.06em, transparent 0.11em),
radial-gradient(circle at 33% 40%, rgba(255, 255, 255, 0.8) 0.06em, transparent 0.11em),
radial-gradient(circle at 47% 86%, rgba(255, 255, 255, 0.55) 0.06em, transparent 0.11em),
radial-gradient(circle at 58% 16%, rgba(255, 255, 255, 0.7) 0.06em, transparent 0.11em),
radial-gradient(circle at 72% 58%, rgba(255, 255, 255, 0.8) 0.06em, transparent 0.11em),
radial-gradient(circle at 88% 30%, rgba(255, 255, 255, 0.6) 0.06em, transparent 0.11em);
}
.btn-starfield::after {
--tile: 11em;
background-image:
radial-gradient(circle at 12% 62%, #fff 0.08em, rgba(255, 255, 255, 0.35) 0.12em, transparent 0.24em),
radial-gradient(circle at 41% 22%, #fff 0.08em, rgba(255, 255, 255, 0.35) 0.12em, transparent 0.24em),
radial-gradient(circle at 69% 78%, #fff 0.08em, rgba(255, 255, 255, 0.35) 0.12em, transparent 0.24em),
radial-gradient(circle at 90% 44%, #fff 0.07em, rgba(255, 255, 255, 0.3) 0.1em, transparent 0.2em);
animation:
btn-starfield-drift 8s linear infinite,
btn-starfield-twinkle 1.8s ease-in-out infinite alternate;
}
.btn-starfield:is(:hover, :focus-visible) {
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.28),
0 0.55em 1.6em -0.4em color-mix(in srgb, var(--c) 80%, transparent);
}
.btn-starfield:active { transform: scale(0.97); }
@keyframes btn-starfield-drift {
to { transform: translateX(calc(var(--tile) * -1)); }
}
@keyframes btn-starfield-twinkle {
from { opacity: 0.45; }
to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.btn-starfield, .btn-starfield *, .btn-starfield::before, .btn-starfield::after, .btn-starfield *::before, .btn-starfield *::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.