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

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

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