Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save quangmai911/c99cd9143abf94d1960ad74588b6e19f to your computer and use it in GitHub Desktop.
Save quangmai911/c99cd9143abf94d1960ad74588b6e19f to your computer and use it in GitHub Desktop.
Content Blocks Floating Whatsapp Button
<style>
.btn-whatsapp-pulse {
position: fixed;
bottom: 20px;
left: 20px;
width: 64px;
height: 64px;
border-radius: 50%;
animation-name: pulse;
animation-duration: 1.5s;
animation-timing-function: ease-out;
animation-iteration-count: infinite;
z-index:99;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
80% { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); }
}
@media (max-width:480px) { .btn-whatsapp-pulse { bottom: 70px; width: 40px; height: 40px; } }
</style>
<a href="https://wa.me/0905413909490?text=Merhaba" class="btn-whatsapp-pulse" 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