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