Tombol Gelombang Air kode CSS



📄 Kode HTML

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Tombol Ripple Bubble</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <button class="ripple-btn">Klik Aku</button>

  <script src="script.js"></script>
</body>
</html>

🎨 Kode CSS

body {
  background: #111;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.ripple-btn {
  position: relative;
  overflow: hidden;
  padding: 16px 40px;
  font-size: 1.2rem;
  color: white;
  background: #0af;
  border: none;
  border-radius: 40px;
  cursor: pointer;
}

.ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: ripple-effect 0.6s linear;
  background: rgba(255, 255, 255, 0.6);
  pointer-events: none;
}

@keyframes ripple-effect {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

⚙️ Kode JavaScript

document.querySelectorAll('.ripple-btn').forEach(button => {
  button.addEventListener('click', function (e) {
    const circle = document.createElement('span');
    circle.classList.add('ripple');

    const rect = this.getBoundingClientRect();
    const size = Math.max(rect.width, rect.height);
    circle.style.width = circle.style.height = size + 'px';

    circle.style.left = (e.clientX - rect.left - size / 2) + 'px';
    circle.style.top = (e.clientY - rect.top - size / 2) + 'px';

    this.appendChild(circle);

    setTimeout(() => {
      circle.remove();
    }, 600);
  }); 

}); 

Komentar

Posting Komentar