<button class="ccb-vortex" aria-label="Close"><span></span><span></span></button>

.ccb-vortex {
  width: 44px; height: 44px;
  border: none; border-radius: 50%;
  background: #0c0c12;
  position: relative; cursor: pointer; overflow: hidden;
  isolation: isolate;
}
.ccb-vortex::before {
  content: ''; position: absolute; inset: -25%;
  background: conic-gradient(from 0deg, #7c6cff, #ff6c8a, #f5a623, #2ecc8a, #06b6d4, #7c6cff);
  animation: ccb-vortex-spin 6s linear infinite;
  z-index: -2;
}
.ccb-vortex::after {
  content: ''; position: absolute; inset: 2px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #1a1a28, #0c0c12 70%);
  z-index: -1;
}
.ccb-vortex:hover::before { animation-duration: 1.2s; }
.ccb-vortex span {
  position: absolute; top: 50%; left: 50%;
  width: 18px; height: 2px;
  background: #fff; border-radius: 2px;
  box-shadow: 0 0 8px rgba(255,255,255,0.6);
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.ccb-vortex span:nth-child(1) { transform: translate(-50%,-50%) rotate(45deg); }
.ccb-vortex span:nth-child(2) { transform: translate(-50%,-50%) rotate(-45deg); }
.ccb-vortex:hover span:nth-child(1) { transform: translate(-50%,-50%) rotate(135deg) scale(1.1); }
.ccb-vortex:hover span:nth-child(2) { transform: translate(-50%,-50%) rotate(-135deg) scale(1.1); }
@keyframes ccb-vortex-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .ccb-vortex,
  .ccb-vortex * {
    animation: none !important;
  }
}