Skip to content

Instantly share code, notes, and snippets.

@tdmrhn

tdmrhn/floating-whatsapp-button.html

Last active February 27, 2024 11:56
Show Gist options
  • Save tdmrhn/070c9bba39cddf4121e882fa705db370 to your computer and use it in GitHub Desktop.
Save tdmrhn/070c9bba39cddf4121e882fa705db370 to your computer and use it in GitHub Desktop.
Download ZIP
Content Blocks Floating Whatsapp Button
Raw
floating-whatsapp-button.html
<style>.dhn-whatsapp{position:fixed;bottom:20px;left:20px;width:64px;height:64px;border-radius:50%;animation:1.5s ease-out infinite pulse;z-index:99}@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}80%{box-shadow:0 0 0 14px rgba(37,211,102,0)}}@media (max-width:700px){.btn-whatsapp-pulse{bottom:70px;width:40px;height:40px}}</style>
<a href="https://wa.me/NUMBER?text=Hello" class="dhn-whatsapp" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="31" fill="#30bf39"/><path fill="#fff" d="M41.4 34.8c-.4-.2-2.5-1.4-2.9-1.5-.4-.2-.7-.2-1 .2-.3.4-1.2 1.4-1.4 1.6-.3.3-.5.3-.9.1-.4-.2-1.8-.7-3.4-2.3-1.2-1.2-2.1-2.6-2.3-3.1-.2-.4 0-.7.2-.9.2-.2.4-.5.7-.7s.3-.4.5-.7c.2-.3.1-.5 0-.8s-.9-2.4-1.2-3.3c-.3-.9-.7-.7-.9-.8-.3 0-.5-.1-.8-.1-.4 0-.9.2-1.2.5-.4.4-1.6 1.4-1.6 3.5s1.4 4.3 1.6 4.5c.2.3 2.8 4.9 7.1 6.8 4.3 1.9 4.3 1.3 5.1 1.3.8 0 2.6-1 3-1.9.4-1 .4-1.9.3-2-.2 0-.5-.1-.9-.4zm-8 10.3c-2.8 0-5.4-.8-7.7-2.3l-5.4 1.7 1.8-5.2c-1.7-2.4-2.7-5.3-2.7-8.3 0-7.8 6.3-14.1 14.1-14.1s14 6.3 14 14.1-6.3 14.1-14.1 14.1zm0-31c-9.3 0-16.9 7.6-16.9 16.9 0 3.1.8 6.1 2.4 8.7l-3.1 9.1 9.4-3c2.5 1.4 5.3 2.1 8.2 2.1 9.3 0 16.9-7.6 16.9-16.9s-7.5-16.9-16.9-16.9z"/></svg>
</a>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment