floating button wa

ini di footer.php

<div class="tombolwa">
	<a href="#linkdisini"><i class="icons8-whatsapp"></i> <span>Hubungi Kami</span></a>
</div>

ini di style.css

.tombolwa{
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 9999;
    }
.tombolwa a{
    padding: 10px 15px;
    text-align: center;
    background: #25d366;
    color:#fff;
    border-radius: 4px;
	    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;

    }
.tombolwa a span{
-webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}
.tombolwa a:hover{
    color:#fff!important;
    background: #075e54;
    }

@media screen and (max-width: 700px){
    .tombolwa{
        display: block;
        width: 100%;
        right: 0;
        bottom: 0;
        }
}

.icons8-whatsapp {
  width: 25px;
  height: 25px;
    vertical-align: 15%;
    line-height: 0.75em;
display:inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
margin-top:0px;
  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4IgogICAgIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIKICAgICB2aWV3Qm94PSIwIDAgMzIgMzIiCiAgICAgc3R5bGU9ImZpbGw6I2ZmZmZmZjsiPjxnIGlkPSJzdXJmYWNlMSI+PHBhdGggc3R5bGU9IiBmaWxsLXJ1bGU6ZXZlbm9kZDsiIGQ9Ik0gMjQuNTAzOTA2IDcuNTAzOTA2IEMgMjIuMjQ2MDk0IDUuMjQ2MDk0IDE5LjI0NjA5NCA0IDE2LjA1MDc4MSA0IEMgOS40NjQ4NDQgNCA0LjEwMTU2MyA5LjM1OTM3NSA0LjEwMTU2MyAxNS45NDUzMTMgQyA0LjA5NzY1NiAxOC4wNTA3ODEgNC42NDg0MzggMjAuMTA1NDY5IDUuNjk1MzEzIDIxLjkxNzk2OSBMIDQgMjguMTA5Mzc1IEwgMTAuMzM1OTM4IDI2LjQ0NTMxMyBDIDEyLjA3ODEyNSAyNy4zOTg0MzggMTQuMDQ2ODc1IDI3Ljg5ODQzOCAxNi4wNDY4NzUgMjcuOTAyMzQ0IEwgMTYuMDUwNzgxIDI3LjkwMjM0NCBDIDIyLjYzNjcxOSAyNy45MDIzNDQgMjcuOTk2MDk0IDIyLjU0Mjk2OSAyOCAxNS45NTMxMjUgQyAyOCAxMi43NjE3MTkgMjYuNzU3ODEzIDkuNzYxNzE5IDI0LjUwMzkwNiA3LjUwMzkwNiBaIE0gMTYuMDUwNzgxIDI1Ljg4MjgxMyBMIDE2LjA0Njg3NSAyNS44ODI4MTMgQyAxNC4yNjU2MjUgMjUuODgyODEzIDEyLjUxNTYyNSAyNS40MDIzNDQgMTAuOTkyMTg4IDI0LjUgTCAxMC42Mjg5MDYgMjQuMjg1MTU2IEwgNi44NjcxODggMjUuMjY5NTMxIEwgNy44NzEwOTQgMjEuNjA1NDY5IEwgNy42MzY3MTkgMjEuMjMwNDY5IEMgNi42NDA2MjUgMTkuNjQ4NDM4IDYuMTE3MTg4IDE3LjgyMDMxMyA2LjExNzE4OCAxNS45NDUzMTMgQyA2LjExNzE4OCAxMC40NzI2NTYgMTAuNTc0MjE5IDYuMDE5NTMxIDE2LjA1NDY4OCA2LjAxOTUzMSBDIDE4LjcwNzAzMSA2LjAxOTUzMSAyMS4xOTkyMTkgNy4wNTQ2ODggMjMuMDc0MjE5IDguOTI5Njg4IEMgMjQuOTQ5MjE5IDEwLjgwODU5NCAyNS45ODA0NjkgMTMuMzAwNzgxIDI1Ljk4MDQ2OSAxNS45NTMxMjUgQyAyNS45ODA0NjkgMjEuNDI5Njg4IDIxLjUyMzQzOCAyNS44ODI4MTMgMTYuMDUwNzgxIDI1Ljg4MjgxMyBaIE0gMjEuNDk2MDk0IDE4LjQ0NTMxMyBDIDIxLjE5OTIxOSAxOC4yOTY4NzUgMTkuNzMwNDY5IDE3LjU3NDIxOSAxOS40NTcwMzEgMTcuNDc2NTYzIEMgMTkuMTgzNTk0IDE3LjM3NSAxOC45ODQzNzUgMTcuMzI4MTI1IDE4Ljc4NTE1NiAxNy42MjUgQyAxOC41ODU5MzggMTcuOTI1NzgxIDE4LjAxNTYyNSAxOC41OTc2NTYgMTcuODM5ODQ0IDE4Ljc5Njg3NSBDIDE3LjY2Nzk2OSAxOC45OTIxODggMTcuNDkyMTg4IDE5LjAxOTUzMSAxNy4xOTUzMTMgMTguODcxMDk0IEMgMTYuODk0NTMxIDE4LjcyMjY1NiAxNS45MzM1OTQgMTguNDA2MjUgMTQuNzkyOTY5IDE3LjM4NjcxOSBDIDEzLjkwNjI1IDE2LjU5NzY1NiAxMy4zMDQ2ODggMTUuNjE3MTg4IDEzLjEzMjgxMyAxNS4zMjAzMTMgQyAxMi45NTcwMzEgMTUuMDE5NTMxIDEzLjExMzI4MSAxNC44NTkzNzUgMTMuMjYxNzE5IDE0LjcxMDkzOCBDIDEzLjM5ODQzOCAxNC41NzgxMjUgMTMuNTYyNSAxNC4zNjMyODEgMTMuNzEwOTM4IDE0LjE4NzUgQyAxMy44NTkzNzUgMTQuMDE1NjI1IDEzLjkxMDE1NiAxMy44OTA2MjUgMTQuMDExNzE5IDEzLjY5MTQwNiBDIDE0LjEwOTM3NSAxMy40OTIxODggMTQuMDU4NTk0IDEzLjMxNjQwNiAxMy45ODQzNzUgMTMuMTY3OTY5IEMgMTMuOTEwMTU2IDEzLjAxOTUzMSAxMy4zMTI1IDExLjU0Njg3NSAxMy4wNjI1IDEwLjk0OTIxOSBDIDEyLjgyMDMxMyAxMC4zNjcxODggMTIuNTc0MjE5IDEwLjQ0OTIxOSAxMi4zOTA2MjUgMTAuNDM3NSBDIDEyLjIxODc1IDEwLjQyOTY4OCAxMi4wMTk1MzEgMTAuNDI5Njg4IDExLjgyMDMxMyAxMC40Mjk2ODggQyAxMS42MjEwOTQgMTAuNDI5Njg4IDExLjI5Njg3NSAxMC41MDM5MDYgMTEuMDIzNDM4IDEwLjgwNDY4OCBDIDEwLjc1IDExLjEwMTU2MyA5Ljk4MDQ2OSAxMS44MjQyMTkgOS45ODA0NjkgMTMuMjkyOTY5IEMgOS45ODA0NjkgMTQuNzYxNzE5IDExLjA1MDc4MSAxNi4xODM1OTQgMTEuMTk5MjE5IDE2LjM4MjgxMyBDIDExLjM0NzY1NiAxNi41NzgxMjUgMTMuMzA0Njg4IDE5LjU5Mzc1IDE2LjMwMDc4MSAyMC44ODY3MTkgQyAxNy4wMTE3MTkgMjEuMTk1MzEzIDE3LjU2NjQwNiAyMS4zNzg5MDYgMTggMjEuNTE1NjI1IEMgMTguNzE0ODQ0IDIxLjc0MjE4OCAxOS4zNjcxODggMjEuNzEwOTM4IDE5Ljg4MjgxMyAyMS42MzY3MTkgQyAyMC40NTcwMzEgMjEuNTUwNzgxIDIxLjY0ODQzOCAyMC45MTQwNjMgMjEuODk4NDM4IDIwLjIxNDg0NCBDIDIyLjE0NDUzMSAxOS41MTk1MzEgMjIuMTQ0NTMxIDE4LjkyMTg3NSAyMi4wNzAzMTMgMTguNzk2ODc1IEMgMjEuOTk2MDk0IDE4LjY3MTg3NSAyMS43OTY4NzUgMTguNTk3NjU2IDIxLjQ5NjA5NCAxOC40NDUzMTMgWiAiPjwvcGF0aD48L2c+PC9zdmc+') 50% 50% no-repeat;
  background-size: 100%;
}

style tombol aja di style.css

.tombolwa{
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 9999;
  font-size: 16px!important;
}
.tombolwa a{
  padding: 10px 15px;

  text-align: center;
  background: #25d366;
  color:#fff;
  border-radius: 10em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: center!important;
  align-items: center!important;

}
.tombolwa a span{
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.tombolwa a:hover{
  color:#fff!important;
  background: #075e54;
}



.icons8-whatsapp {
  width: 30px;
  height: 30px;
  vertical-align: 15%;
  line-height: 0.75em;
  display:inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  margin-top:0px;
  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4IgogICAgIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIKICAgICB2aWV3Qm94PSIwIDAgMzIgMzIiCiAgICAgc3R5bGU9ImZpbGw6I2ZmZmZmZjsiPjxnIGlkPSJzdXJmYWNlMSI+PHBhdGggc3R5bGU9IiBmaWxsLXJ1bGU6ZXZlbm9kZDsiIGQ9Ik0gMjQuNTAzOTA2IDcuNTAzOTA2IEMgMjIuMjQ2MDk0IDUuMjQ2MDk0IDE5LjI0NjA5NCA0IDE2LjA1MDc4MSA0IEMgOS40NjQ4NDQgNCA0LjEwMTU2MyA5LjM1OTM3NSA0LjEwMTU2MyAxNS45NDUzMTMgQyA0LjA5NzY1NiAxOC4wNTA3ODEgNC42NDg0MzggMjAuMTA1NDY5IDUuNjk1MzEzIDIxLjkxNzk2OSBMIDQgMjguMTA5Mzc1IEwgMTAuMzM1OTM4IDI2LjQ0NTMxMyBDIDEyLjA3ODEyNSAyNy4zOTg0MzggMTQuMDQ2ODc1IDI3Ljg5ODQzOCAxNi4wNDY4NzUgMjcuOTAyMzQ0IEwgMTYuMDUwNzgxIDI3LjkwMjM0NCBDIDIyLjYzNjcxOSAyNy45MDIzNDQgMjcuOTk2MDk0IDIyLjU0Mjk2OSAyOCAxNS45NTMxMjUgQyAyOCAxMi43NjE3MTkgMjYuNzU3ODEzIDkuNzYxNzE5IDI0LjUwMzkwNiA3LjUwMzkwNiBaIE0gMTYuMDUwNzgxIDI1Ljg4MjgxMyBMIDE2LjA0Njg3NSAyNS44ODI4MTMgQyAxNC4yNjU2MjUgMjUuODgyODEzIDEyLjUxNTYyNSAyNS40MDIzNDQgMTAuOTkyMTg4IDI0LjUgTCAxMC42Mjg5MDYgMjQuMjg1MTU2IEwgNi44NjcxODggMjUuMjY5NTMxIEwgNy44NzEwOTQgMjEuNjA1NDY5IEwgNy42MzY3MTkgMjEuMjMwNDY5IEMgNi42NDA2MjUgMTkuNjQ4NDM4IDYuMTE3MTg4IDE3LjgyMDMxMyA2LjExNzE4OCAxNS45NDUzMTMgQyA2LjExNzE4OCAxMC40NzI2NTYgMTAuNTc0MjE5IDYuMDE5NTMxIDE2LjA1NDY4OCA2LjAxOTUzMSBDIDE4LjcwNzAzMSA2LjAxOTUzMSAyMS4xOTkyMTkgNy4wNTQ2ODggMjMuMDc0MjE5IDguOTI5Njg4IEMgMjQuOTQ5MjE5IDEwLjgwODU5NCAyNS45ODA0NjkgMTMuMzAwNzgxIDI1Ljk4MDQ2OSAxNS45NTMxMjUgQyAyNS45ODA0NjkgMjEuNDI5Njg4IDIxLjUyMzQzOCAyNS44ODI4MTMgMTYuMDUwNzgxIDI1Ljg4MjgxMyBaIE0gMjEuNDk2MDk0IDE4LjQ0NTMxMyBDIDIxLjE5OTIxOSAxOC4yOTY4NzUgMTkuNzMwNDY5IDE3LjU3NDIxOSAxOS40NTcwMzEgMTcuNDc2NTYzIEMgMTkuMTgzNTk0IDE3LjM3NSAxOC45ODQzNzUgMTcuMzI4MTI1IDE4Ljc4NTE1NiAxNy42MjUgQyAxOC41ODU5MzggMTcuOTI1NzgxIDE4LjAxNTYyNSAxOC41OTc2NTYgMTcuODM5ODQ0IDE4Ljc5Njg3NSBDIDE3LjY2Nzk2OSAxOC45OTIxODggMTcuNDkyMTg4IDE5LjAxOTUzMSAxNy4xOTUzMTMgMTguODcxMDk0IEMgMTYuODk0NTMxIDE4LjcyMjY1NiAxNS45MzM1OTQgMTguNDA2MjUgMTQuNzkyOTY5IDE3LjM4NjcxOSBDIDEzLjkwNjI1IDE2LjU5NzY1NiAxMy4zMDQ2ODggMTUuNjE3MTg4IDEzLjEzMjgxMyAxNS4zMjAzMTMgQyAxMi45NTcwMzEgMTUuMDE5NTMxIDEzLjExMzI4MSAxNC44NTkzNzUgMTMuMjYxNzE5IDE0LjcxMDkzOCBDIDEzLjM5ODQzOCAxNC41NzgxMjUgMTMuNTYyNSAxNC4zNjMyODEgMTMuNzEwOTM4IDE0LjE4NzUgQyAxMy44NTkzNzUgMTQuMDE1NjI1IDEzLjkxMDE1NiAxMy44OTA2MjUgMTQuMDExNzE5IDEzLjY5MTQwNiBDIDE0LjEwOTM3NSAxMy40OTIxODggMTQuMDU4NTk0IDEzLjMxNjQwNiAxMy45ODQzNzUgMTMuMTY3OTY5IEMgMTMuOTEwMTU2IDEzLjAxOTUzMSAxMy4zMTI1IDExLjU0Njg3NSAxMy4wNjI1IDEwLjk0OTIxOSBDIDEyLjgyMDMxMyAxMC4zNjcxODggMTIuNTc0MjE5IDEwLjQ0OTIxOSAxMi4zOTA2MjUgMTAuNDM3NSBDIDEyLjIxODc1IDEwLjQyOTY4OCAxMi4wMTk1MzEgMTAuNDI5Njg4IDExLjgyMDMxMyAxMC40Mjk2ODggQyAxMS42MjEwOTQgMTAuNDI5Njg4IDExLjI5Njg3NSAxMC41MDM5MDYgMTEuMDIzNDM4IDEwLjgwNDY4OCBDIDEwLjc1IDExLjEwMTU2MyA5Ljk4MDQ2OSAxMS44MjQyMTkgOS45ODA0NjkgMTMuMjkyOTY5IEMgOS45ODA0NjkgMTQuNzYxNzE5IDExLjA1MDc4MSAxNi4xODM1OTQgMTEuMTk5MjE5IDE2LjM4MjgxMyBDIDExLjM0NzY1NiAxNi41NzgxMjUgMTMuMzA0Njg4IDE5LjU5Mzc1IDE2LjMwMDc4MSAyMC44ODY3MTkgQyAxNy4wMTE3MTkgMjEuMTk1MzEzIDE3LjU2NjQwNiAyMS4zNzg5MDYgMTggMjEuNTE1NjI1IEMgMTguNzE0ODQ0IDIxLjc0MjE4OCAxOS4zNjcxODggMjEuNzEwOTM4IDE5Ljg4MjgxMyAyMS42MzY3MTkgQyAyMC40NTcwMzEgMjEuNTUwNzgxIDIxLjY0ODQzOCAyMC45MTQwNjMgMjEuODk4NDM4IDIwLjIxNDg0NCBDIDIyLjE0NDUzMSAxOS41MTk1MzEgMjIuMTQ0NTMxIDE4LjkyMTg3NSAyMi4wNzAzMTMgMTguNzk2ODc1IEMgMjEuOTk2MDk0IDE4LjY3MTg3NSAyMS43OTY4NzUgMTguNTk3NjU2IDIxLjQ5NjA5NCAxOC40NDUzMTMgWiAiPjwvcGF0aD48L2c+PC9zdmc+') 50% 50% no-repeat;
  background-size: cover;

}

@media screen and (max-width: 640px){
  .tombolwa a {
    padding: 5px 10px;
    width: 50px;
    height: 50px;
    border-radius: 100%;
  }
  .tombolwa a span{display: none;}
}