Back to CSS Close Buttons Neon Etch Pure CSS
Share
HTML
<button class="ccb-neon" aria-label="Close"><span></span><span></span></button>
CSS
.ccb-neon {
  width: 40px; height: 40px;
  border: 1.5px solid #2ecc8a;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 8px rgba(46,204,138,0.35), inset 0 0 8px rgba(46,204,138,0.15);
  position: relative; cursor: pointer;
  animation: ccb-neon-breathe 2.4s ease-in-out infinite;
  transition: transform 0.2s;
}
.ccb-neon:hover { transform: scale(1.1); }
.ccb-neon span {
  position: absolute; top: 50%; left: 50%;
  width: 16px; height: 2px;
  background: #2ecc8a;
  border-radius: 2px;
  box-shadow: 0 0 6px rgba(46,204,138,0.7);
}
.ccb-neon span:nth-child(1) { transform: translate(-50%,-50%) rotate(45deg); }
.ccb-neon span:nth-child(2) { transform: translate(-50%,-50%) rotate(-45deg); }
@keyframes ccb-neon-breathe {
  0%,100% { box-shadow: 0 0 8px  rgba(46,204,138,0.35), inset 0 0 8px  rgba(46,204,138,0.15); }
  50%      { box-shadow: 0 0 18px rgba(46,204,138,0.7),  inset 0 0 14px rgba(46,204,138,0.3); }
}

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