To create a WhatsApp Floating Button you need to create the button first then style it to your specification. For example:

<!-- load font awesome for icons -->
<link rel="stylesheet"
href="" />

<!-- add your custom CSS -->
body {
 font-family: sans-serif;

/* Add WA floating button CSS */
.floating {
 position: fixed;
 width: 60px;
 height: 60px;
 bottom: 40px;
 right: 40px;
 background-color: #25d366;
 color: #fff;
 border-radius: 50px;
 text-align: center;
 font-size: 30px;
 box-shadow: 2px 2px 3px #999;
 z-index: 100;

.fab-icon {
 margin-top: 16px;

<!-- render the button and direct it to -->
<a href="" class="floating" target="_blank">
<i class="fab fa-whatsapp fab-icon"></i>

Leave a Reply

Your email address will not be published. Required fields are marked *