Animated Neon Glow Button in HTML CSS and JavaScript

HTML

CSS

body {
      margin: 0;
      padding: 0;
      background-color: #080810;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

/* Button Container to handle the clipping and padding */
    .neon-container {
      position: relative;
      display: inline-block;
      padding: 3px;
      border-radius: 10px;
      background: conic-gradient(
        from var(--angle),
        transparent,
        var(--glow-color) 20%,
        transparent 40%,
        transparent 60%,
        var(--glow-color) 80%,
        transparent 100%
      );
      transition: filter 0.3s ease;
    }

.neon-btn {
      position: relative;
      background: #11111b;
      color: var(--glow-color);
      border: none;
      padding: 15px 40px;
      font-size: 18px;
      font-weight: bold;
      text-transform: uppercase;
      letter-spacing: 2px;
      border-radius: 8px;
      cursor: pointer;
      outline: none;
      display: block;
      transition: all 0.3s ease;
      text-shadow: 0 0 8px rgba(0, 243, 255, 0.6);
    }

/* Static continuous faint glow around the container */
    .neon-container::after {
      content: '';
      position: absolute;
      inset: 0;
      background: inherit;
      border-radius: inherit;
      filter: blur(15px);
      opacity: 0.4;
      z-index: -1;
      transition: opacity 0.3s ease, filter 0.3s ease;
    }

/* Hover States: Amplify colors and expand the light burst */
    .neon-container:hover {
      filter: brightness(1.2);
    }

.neon-container:hover .neon-btn {
      background: var(--glow-color);
      color: #080810;
      text-shadow: none;
      box-shadow: 
        0 0 15px var(--glow-color),
        0 0 30px var(--glow-color),
        0 0 60px var(--glow-color);
    }

.neon-container:hover::after {
      filter: blur(25px);
      opacity: 0.9;
    }

/* Click compression effect */
    .neon-container:active {
      transform: scale(0.96);
    }
  </style>
</head>
<body>

<div class="neon-container" id="neonContainer">
    <button class="neon-btn">Click Me</button>
  </div>

// Smooth frame-by-frame loop to rotate the gradient boundary light
      const animateGlow = () => {
        angle = (angle + 1.5) % 360; 
        container.style.setProperty("--angle", `${angle}deg`);
        requestAnimationFrame(animateGlow);
      };

animateGlow();

// Interactive click behavior: cycle colors dynamically
      const neonColors = ['#00f3ff', '#ff007f', '#00ff66', '#ffff00', '#9d00ff'];
      let colorIndex = 0;

container.addEventListener('click', () => {
        colorIndex = (colorIndex + 1) % neonColors.length;
        const nextColor = neonColors[colorIndex];
        
        // Dynamically shift CSS variable values for all component layers
        document.documentElement.style.setProperty('--glow-color', nextColor);
        
        const innerButton = container.querySelector('.neon-btn');
        innerButton.style.textShadow = `0 0 8px ${nextColor}`;
      });
    });
  </script>

</body>
</html>

JS