Floating Button Whatsapp Untuk Elementor

Sebuah cheatsheet untuk menambahkan Tombol Floating Button Whatsapp di Elementor, mudah dan cepat.

<style>
.wa{
    position:fixed;
    width:60px;
    height:60px;
    bottom:40px;
    right:20px;
    background-color:#25d366;
    color:#FFF;
    border-radius:50px;
    text-align:center;
  font-size:30px;
    box-shadow: 2px 2px 3px #999;
  z-index:100;
}

.wa:hover{
    background-color:#ef4d48;
    color:#fff;
}

.wa-float{
    margin-top:16px;
}
.line-float{
    margin-top:15px;

}

.line{
    position:fixed;
    width:60px;
    height:60px;
    bottom:120px;
    right:20px;
    background-color:purple;
    color:#FFF;
    border-radius:50px;
    text-align:center;
  font-size:30px;
    box-shadow: 2px 2px 3px #999;
  z-index:100;
}
.line:hover{
    background-color:#ef4d48;
    color:#fff;
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<a href="https://wa.me/628118841216" class="wa" target="_blank">
<i class="fa-brands fa-whatsapp wa-float"></i>
</a>
<a href="https://www.instagram.com/imunisasi.healthy.family/" class="line" target="_blank">
<i class="fa-brands fa-instagram line-float"></i>
</a>