Default Component - Copy this React, Tailwind Component to your project

{!isOpen && ( <button onClick={handleButtonClick} className="relative w-16 h-16 bg-[#25D366] rounded-full flex items-center justify-center shadow-lg hover:bg-[#20b958] transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-[#25D366] focus:ring-opacity-50" aria-label="Open WhatsApp Chat" > <FaWhatsapp className="text-white text-3xl" /> {ripple.active && ( <span className="absolute rounded-full bg-white bg-opacity-30 animate-ripple" style={{ top: ripple.y, left: ripple.x, transform: "translate(-50%, -50%)" }} /> )} <span className="absolute -top-1 -right-1 w-4 h-4 bg-red-500 rounded-full animate-pulse" /> </button> )} i want add on ripple effect on it and bounce attrative and inter active