Code Box
1st code:go to edit html after search crt+F
< head> just down paste.1st code
HTML 1
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
2nd code:go to edit html after search crt+F
< /body> tag up(above) paste.2nd code
HTML2
<div class="whatsapp-btn-container">
<a class="whatsapp-btn" href="https://wa.me/91999999999"><i class="fab fa-whatsapp"></i></a>
<span>Contact Us</span>
</div>
3rd code:goto edit html after search crt+F
tag < /b:skin> just up(above) paste.3rd code
HTM3
.whatsapp-btn-container {
position: fixed;
right: 20px;
opacity: 0;
bottom: -50px;
padding: 24px;
animation: fade-up 1000ms forwards;
animation-delay: 1000ms;
z-index: 500;
}
@keyframes fade-up {
100% {
bottom: 74px;
opacity: 1;
}
}
.whatsapp-btn-container .whatsapp-btn {
font-size: 35px;
color: #25d366;
display: inline-block;
transition: all 400ms;
}
.whatsapp-btn-container .whatsapp-btn:hover {
transform: scale(1.2);
}
.whatsapp-btn-container span {
position: absolute;
top: 0;
left: 4px;
font-family: "Roboto", sans-serif;
font-weight: bold;
font-size: 15px;
color: #075e54;
transform: rotateZ(20deg) translateX(10px);
opacity: 0;
transition: all 400ms;
}
.whatsapp-btn-container .whatsapp-btn:hover + span {
transform: rotateZ(0deg) translateX(0px);
opacity: 1;
}
HTML 4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="whatsapp-btn-container">
<a class="whatsapp-btn" href="https://wa.me/91999999999"><i class="fab fa-whatsapp"></i></a>
<span>Contact Us</span>
</div>
</body>
</html>
