درست کردن افکت کلیک موج دکمه های المنتور

.rico {
    position: relative !important;;
    overflow: hidden !important;
    cursor: pointer;
}

.rico-ripple {
    position: absolute !important;;
    border-radius: 50% !important;;
    background: rgba(255, 255, 255, 0.7) !important;;
    transform: scale(0);
    animation: ripple 0.6s linear;
    pointer-events: none;
    z-index: 10;
}

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

<script>
document.addEventListener('click', function(e) {
    const target = e.target;
    const button = target.closest('.rico');
    
    if (button) {
        const ripple = document.createElement('span');
        const diameter = Math.max(button.clientWidth, button.clientHeight);
        const radius = diameter / 2;
        
        const rect = button.getBoundingClientRect();
        const x = e.clientX - rect.left - radius;
        const y = e.clientY - rect.top - radius;
        
        ripple.classList.add('rico-ripple');
        ripple.style.width = ripple.style.height = diameter + 'px';
        ripple.style.left = x + 'px';
        ripple.style.top = y + 'px';
        
        button.appendChild(ripple);
        
        setTimeout(() => {
            if (ripple.parentNode === button) {
                ripple.remove();
            }
        }, 600);
    }
});</script>