1 
2<button class="fancy-button">Click Me!</button>          

 1 
 2.fancy-button {
 3  position: relative;
 4  padding: 14px 28px;
 5  font-size: 18px;
 6  font-weight: 600;
 7  color: white;
 8  background: linear-gradient(135deg, #8b5cf6, #6366f1);
 9  border: none;
10  border-radius: 12px;
11  cursor: pointer;
12  overflow: hidden;
13  outline: none;
14  box-shadow: 0 6px 16px rgba(139, 92, 246, 0.4);
15  transition: all 0.3s ease;
16}
17 
18.fancy-button:hover {
19  transform: translateY(-2px);
20  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.6);
21  background: linear-gradient(135deg, #7c3aed, #4f46e5);
22}
23 
24.fancy-button:focus {
25  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.5);
26}
27 
28/* Ripple effect container */
29.ripple {
30  position: absolute;
31  border-radius: 50%;
32  background-color: rgba(255, 255, 255, 0.5);
33  transform: scale(0);
34  animation: rippleEffect 0.6s linear;
35  pointer-events: none;
36}
37 
38@keyframes rippleEffect {
39  to {
40    transform: scale(3);
41    opacity: 0;
42  }
43}          

 1 
 2document.querySelector('.fancy-button').addEventListener('click', function(e) {
 3  const button = e.currentTarget;
 4  const rect = button.getBoundingClientRect();
 5  const size = Math.max(rect.width, rect.height);
 6  const x = e.clientX - rect.left - size / 2;
 7  const y = e.clientY - rect.top - size / 2;
 8 
 9  const ripple = document.createElement('span');
10  ripple.classList.add('ripple');
11  ripple.style.width = ripple.style.height = `${size}px`;
12  ripple.style.left = `${x}px`;
13  ripple.style.top = `${y}px`;
14 
15  button.appendChild(ripple);
16 
17  // Hapus elemen ripple setelah animasi selesai
18  setTimeout(() => {
19    ripple.remove();
20  }, 600);
21});