.cfb-aurora {
position: relative;
width: 56px; height: 56px;
border: 0; border-radius: 50%;
background: #15151d;
color: #fff;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
overflow: hidden;
isolation: isolate;
box-shadow: 0 6px 18px rgba(0,0,0,0.5);
}
.cfb-aurora::before {
content: ''; position: absolute;
top: -40%; left: -20%;
width: 140%; height: 220%;
background:
radial-gradient(ellipse 60px 50px at 20% 50%, rgba(124,108,255,0.7), transparent 60%),
radial-gradient(ellipse 50px 40px at 60% 50%, rgba(255,108,138,0.6), transparent 60%),
radial-gradient(ellipse 60px 50px at 100% 50%, rgba(46,204,138,0.45), transparent 60%);
filter: blur(8px);
z-index: -1;
animation: cfb-aurora-drift 14s ease-in-out infinite;
}
.cfb-aurora:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(124,108,255,0.4); }
.cfb-aurora:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.cfb-aurora svg { width: 22px; height: 22px; fill: currentColor; filter: drop-shadow(0 0 4px rgba(255,255,255,0.4)); }
@keyframes cfb-aurora-drift {
0%, 100% { transform: translateX(0) translateY(0); }
50% { transform: translateX(-8%) translateY(2%); }
} <button type="button" class="cfb-aurora" aria-label="Upgrade">
<svg viewBox="0 0 24 24" aria-hidden="true">
<polygon points="12 2 15 8 22 9 17 14 18 21 12 18 6 21 7 14 2 9 9 8 12 2" />
</svg>
</button> Live preview Edit any tab — preview updates live Ready