WhatsApp Floating Button

Code is this :

<!-- WhatsApp Floating Button -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">

<a href="https://wa.me/923XXXXXXXXX?text=Hi%20Your%20Store%20Name!%20I'm%20interested%20in%20your%20products."
   class="whatsapp-float"
   target="_blank"
   rel="noopener noreferrer"
   aria-label="Chat on WhatsApp">

    <i class="fa-brands fa-whatsapp"></i>

</a>

<style>
.whatsapp-float{
    position:fixed;
    right:24px;
    bottom:24px;
    width:62px;
    height:62px;
    background:#25D366;
    color:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    z-index:9999;
    box-shadow:0 12px 30px rgba(37,211,102,.35);
    transition:.35s ease;
    animation:whatsappPulse 2s infinite;
}

.whatsapp-float i{
    font-size:34px;
}

.whatsapp-float:hover{
    transform:translateY(-4px) scale(1.08);
    box-shadow:0 18px 40px rgba(37,211,102,.45);
}

@keyframes whatsappPulse{
    0%{
        box-shadow:0 0 0 0 rgba(37,211,102,.45);
    }
    70%{
        box-shadow:0 0 0 18px rgba(37,211,102,0);
    }
    100%{
        box-shadow:0 0 0 0 rgba(37,211,102,0);
    }
}

@media(max-width:768px){
    .whatsapp-float{
        width:56px;
        height:56px;
        right:18px;
        bottom:18px;
    }

    .whatsapp-float i{
        font-size:30px;
    }
}
</style>