Back to CSS Floating Buttons Premium Aurora Pure CSS
Share
.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