Looking for a simple yet powerful way to make it easier for your website visitors to contact you via WhatsApp? Here’s a clean and modern floating WhatsApp button with an animated ring effect that grabs attention and encourages engagement — all in just a few lines of HTML and CSS.
Whether you’re a developer, a business owner, or a blogger, this little snippet can help boost your response rates and conversions. And the best part? It’s free to use and easy to integrate!
Demo – WhatsApp Button (Bottom Left)
You can see the WhatsApp floating button demo in the bottom-left corner of this page. It includes a clean design, smooth animation, and opens WhatsApp in a new tab.
Features
- Floating WhatsApp button fixed to the bottom-left or bottom-right corner of the page
- Stylish animated ring effect to catch users’ eyes
- Clean, responsive SVG WhatsApp icon
- Lightweight — no JavaScript needed
- Fully customizable styles
Code Snippet
Here’s the complete HTML and CSS code:
<a href="##" target="_blank" rel="noopener noreferrer" class="inbdigital__wha-float">
<svg xmlns="https://www.w3.org/2000/svg" class="inbdigital__wha-float_icon" width="30" height="30" fill="#fff"
viewBox="0 0 24 24">
<path
d="m.057 24 1.687-6.163a11.87 11.87 0 0 1-1.587-5.946C.16 5.335 5.495 0 12.05 0a11.82 11.82 0 0 1 8.413 3.488 11.82 11.82 0 0 1 3.48 8.414c-.003 6.557-5.338 11.892-11.893 11.892a11.9 11.9 0 0 1-5.688-1.448zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648zm11.387-5.464c-.074-.124-.272-.198-.57-.347s-1.758-.868-2.031-.967c-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165s-.347.223-.644.074-1.255-.462-2.39-1.475c-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074 2.095 3.2 5.076 4.487c.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413s.248-1.29.173-1.414" />
</svg>
</a>
<style>
.inbdigital__wha-float {
position: fixed;
bottom: 30px;
left: 30px;
z-index: 999;
width: 60px;
height: 60px;
display: inline-flex;
color: #FFF;
background-color: #25D366;
text-align: center;
border-radius: 50px;
box-shadow: 2px 2px 3px #999;
transition: all 0.3s ease-in-out;
outline: none;
cursor: pointer;
}
.inbdigital__wha-float::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
z-index: -1;
width: 30px;
height: 30px;
border-radius: 100%;
border: 6px solid #25D366;
transform: translate(-50%, -50%);
animation: ringAnimation 1.5s infinite;
}
@keyframes ringAnimation {
0% {
width: 50px;
height: 50px;
opacity: 1;
}
100% {
width: 120px;
height: 120px;
opacity: 0;
}
}
.inbdigital__wha-float .inbdigital__wha-float_icon {
margin: auto;
}
</style>How to Use?
1. Replace the link
Change href="##" to your WhatsApp link.
2. Choose the button position
You can place the floating button in either the bottom-left or bottom-right corner of your website. Simply update the .inbdigital__wha-float class with the positioning values you prefer:
➤ To place it on the bottom-left (default):
.inbdigital__wha-float {
bottom: 30px;
left: 30px;
}➤ To place it on the bottom-right:
.inbdigital__wha-float {
bottom: 30px;
right: 30px;
}📝 Note: If you use right, make sure to remove or comment out the left property, and vice versa. Avoid using both at the same time.
3. Adjust the animation speed
Change the timing in the animation property to control the speed of the ring effect:
animation: ringAnimation 1.5s infinite;Use 1s for faster animation or 2s for a slower one.
4. Paste the Code in Your Website Footer
To ensure it loads correctly, paste the full code snippet into your HTML file right before the closing </body> tag. This is especially important if you’re using it on a WordPress or static site.
💡 Final Tips
- This button works perfectly on all modern browsers and mobile devices.
- You can integrate it into WordPress, Shopify, or any custom HTML site.
- Make sure to test it on mobile, where WhatsApp is most commonly used.
Let your visitors reach you with just one tap. Add this floating WhatsApp button to your site today!
If you found this helpful, feel free to share it with others who might benefit. 🚀