CSS
.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; }
}