Neon Bubble Burst Button in HTML CSS and JavaScript

13 0 Buttons mzierenberg1 Follow

Remix Open In Editor Fullscreen Discuss Publish Your Code

Neon Bubble Burst Button in HTML CSS and JavaScript

.glow-btn {
      position: relative;
      padding: 20px 48px;
      font-size: 1.4rem;
      font-weight: 800;
      letter-spacing: 2px;
      color: #ffffff;
      background: #12121a;
      border: 3px solid #39ff14;
      border-radius: 50px;
      cursor: pointer;
      outline: none;
      user-select: none;
      z-index: 10;
      transition: transform 0.12s cubic-bezier(0.2, 0.8, 0.2, 1), 
                  box-shadow 0.25s ease, 
                  border-color 0.25s ease,
                  background-color 0.25s ease;
      box-shadow: 0 0 12px rgba(57, 255, 20, 0.4),
                  0 0 24px rgba(255, 20, 147, 0.2);
    }

.glow-btn:hover {
      border-color: #ff1493;
      box-shadow: 0 0 20px rgba(57, 255, 20, 0.6),
                  0 0 35px rgba(255, 20, 147, 0.5);
    }

.glow-btn:active,
    .glow-btn.active-glow {
      transform: scale(0.94);
      background: linear-gradient(135deg, rgba(57, 255, 20, 0.25), rgba(255, 20, 147, 0.25));
      border-color: #ffffff;
      box-shadow: 
        0 0 20px #ffffff,
        0 0 45px #39ff14,
        0 0 80px #ff1493,
        0 0 120px #39ff14,
        inset 0 0 25px rgba(255, 20, 147, 0.8);
      text-shadow: 0 0 10px #ffffff, 0 0 20px #ff1493;
    }

.bubble {
      position: fixed;
      border-radius: 50%;
      pointer-events: none;
      z-index: 5;
      transform: translate(-50%, -50%);
    }
  </style>
</head>
<body>

<button class="glow-btn" id="neonBtn">mzierenberg1</button>

btn.addEventListener('click', () => {
      btn.classList.add('active-glow');
      clearTimeout(glowTimeout);
      glowTimeout = setTimeout(() => {
        btn.classList.remove('active-glow');
      }, 350);

const rect = btn.getBoundingClientRect();
      const originX = rect.left + rect.width / 2;
      const originY = rect.top + rect.height / 2;

const bubbleCount = 32;
      for (let i = 0; i < bubbleCount; i++) {
        createBubble(originX, originY);
      }
    });

function createBubble(x, y) {
      const bubble = document.createElement('div');
      bubble.classList.add('bubble');

document.body.appendChild(bubble);

const angle = Math.random() * Math.PI * 2;
      const distance = Math.random() * 180 + 70;
      const destX = Math.cos(angle) * distance;
      const destY = Math.sin(angle) * distance - 50;
      const duration = Math.random() * 600 + 600;

const animation = bubble.animate([
        { 
          transform: 'translate(-50%, -50%) scale(0.3)', 
          opacity: 1 
        },
        { 
          transform: `translate(calc(-50% + ${destX * 0.7}px), calc(-50% + ${destY * 0.7}px)) scale(1.1)`, 
          opacity: 0.9,
          offset: 0.6
        },
        { 
          transform: `translate(calc(-50% + ${destX}px), calc(-50% + ${destY}px)) scale(0.1)`, 
          opacity: 0 
        }
      ], {
        duration: duration,
        easing: 'cubic-bezier(0.16, 1, 0.3, 1)'
      });

animation.onfinish = () => {
        bubble.remove();
      };
    }
  </script>
</body>
</html>

CSS

Comments 0

…

Neon Bubble Burst Button in HTML CSS and JavaScript

Recommended

Comments 0