Aurora Dust
Three premium tier buttons floating on a particle-aurora field — drifting blobs of cyan / magenta / gold via animated background-positions, layered noise, and a subtle hover-lift.
Aurora Dust the 22nd of 22 designs in the 22 CSS Button Group Designs collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<div class="cbgp-dust" role="group" aria-label="Subscription tiers"> <button type="button">Starter</button> <button type="button" class="is-on">Plus</button> <button type="button">Team</button> </div>
.cbgp-dust {
position: relative; display: inline-flex;
padding: 6px;
background: #050810;
border: 1px solid rgba(255,255,255,0.06);
border-radius: 14px;
overflow: hidden;
isolation: isolate;
}
.cbgp-dust::before {
content: '';
position: absolute; inset: -50%;
background:
radial-gradient(circle 70px at 20% 30%, rgba(0,255,224,0.55), transparent 60%),
radial-gradient(circle 60px at 60% 70%, rgba(255,90,241,0.5), transparent 60%),
radial-gradient(circle 80px at 90% 40%, rgba(255,212,121,0.45), transparent 60%),
radial-gradient(circle 50px at 30% 80%, rgba(0,184,232,0.5), transparent 60%);
filter: blur(20px);
z-index: -1;
animation: cbgp-dust-drift 12s ease-in-out infinite;
}
.cbgp-dust::after {
content: '';
position: absolute; inset: 0;
background:
repeating-linear-gradient(45deg,
rgba(255,255,255,0.012) 0 1px,
transparent 1px 3px),
rgba(5,8,16,0.5);
z-index: -1;
}
@keyframes cbgp-dust-drift {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
33% { transform: translate(-6%, 4%) rotate(2deg); }
66% { transform: translate(4%, -3%) rotate(-2deg); }
}
.cbgp-dust button {
padding: 11px 22px;
border: 0; cursor: pointer;
background: transparent;
color: rgba(220,225,230,0.7);
font: 700 12px/1 ui-monospace, monospace;
letter-spacing: 0.16em;
text-transform: uppercase;
border-radius: 10px;
position: relative;
transition: background 0.25s, color 0.25s, transform 0.3s;
}
.cbgp-dust button:hover {
color: #fff;
background: rgba(255,255,255,0.06);
transform: translateY(-1px);
}
.cbgp-dust button.is-on {
background: rgba(8,10,18,0.6);
color: #fff;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.cbgp-dust button:focus-visible { outline: 2px solid #00ffe0; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
.cbgp-dust::before { animation: none !important; }
}