Skip to content

Instantly share code, notes, and snippets.

@man4toman
Created September 30, 2021 13:02
Show Gist options
  • Save man4toman/e8a2acc15524a5188506e5c24277bcdf to your computer and use it in GitHub Desktop.
Save man4toman/e8a2acc15524a5188506e5c24277bcdf to your computer and use it in GitHub Desktop.
Floated join chat button for WhatsApp
<!-- HTML code -->
<div class="joinchat_button">
<a href="https://wa.me/98xxxxxx" class="joinchat_button_open" target="_blank"></a>
</div>
<!-- CSS code -->
.joinchat_button {
right: auto;
left: 8px;
position: fixed;
z-index: 2;
bottom: 8px;
min-width: 60px;
max-width: 95vw;
background: #25d366;
border-radius: 30px;
box-shadow: 1px 6px 24px 0 rgba(7,94,84,.24);
}
.joinchat_button_open {
width: 60px;
height: 60px;
background: transparent url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M3.516 3.516c4.686-4.686 12.284-4.686 16.97 0 4.686 4.686 4.686 12.283 0 16.97a12.004 12.004 0 01-13.754 2.299l-5.814.735a.392.392 0 01-.438-.44l.748-5.788A12.002 12.002 0 013.517 3.517zm3.61 17.043l.3.158a9.846 9.846 0 0011.534-1.758c3.843-3.843 3.843-10.074 0-13.918-3.843-3.843-10.075-3.843-13.918 0a9.846 9.846 0 00-1.747 11.554l.16.303-.51 3.942a.196.196 0 00.219.22l3.961-.501zm6.534-7.003l-.933 1.164a9.843 9.843 0 01-3.497-3.495l1.166-.933a.792.792 0 00.23-.94L9.561 6.96a.793.793 0 00-.924-.445 1291.6 1291.6 0 00-2.023.524.797.797 0 00-.588.88 11.754 11.754 0 0010.005 10.005.797.797 0 00.88-.587l.525-2.023a.793.793 0 00-.445-.923L14.6 13.327a.792.792 0 00-.94.23z'/%3E%3C/svg%3E") 50% no-repeat;
background-size: 36px;
display: block;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment