This guide explains how to implement WhatsApp, Telegram, and Instagram Join Buttons with animation and styling on your website. Follow these steps carefully to integrate the code.
Demo:
WhatsApp Group
Join Now
Telegram Group
Join Now
Instagram Page
Join Now
1. HTML Code
Add the following HTML code to your webpage where you want the buttons to appear.
html
Click To Copy
<div class="inbdigital-join-box wa">
<span>WhatsApp Group</span>
<a href="#" target="_blank"
rel="nofollow noopener noreferrer" title="Join Our Whatsapp Channel">Join Now</a>
</div>
<div class="inbdigital-join-box tg">
<span>Telegram Group</span>
<a href="#" target="_blank" rel="nofollow noopener noreferrer"
title="Follow Our Telegram Channel">Join Now</a>
</div>
<div class="inbdigital-join-box ig">
<span>Instagram Page</span>
<a href="#" target="_blank" rel="nofollow noopener noreferrer"
title="Follow Our Instagram Page">Join Now</a>
</div>
Modify Links: Replace the #
in href="#"
with the actual links to your WhatsApp, Telegram, or Instagram channels/pages.
Example:
html
Click To Copy
<a href="https://chat.whatsapp.com/example" target="_blank"
rel="nofollow noopener noreferrer">Join Now</a>
2. CSS Code
Navigate to your WordPress Dashboard → Appearance → Customize → Additional CSS. Paste the following CSS code inside the Additional CSS box.
css
Click To Copy
.inbdigital-join-box {
margin: 10px 0
;
border: 2px solid transparent;
border-radius: 5px;
display: flex;
padding: 7px;
justify-content: space-between;
}
.inbdigital-join-box a {
display: inline-flex;
color: #fff !important;
font-size: 1rem;
font-weight: bold;
padding: 5px 10px;
border-radius: 4px;
text-decoration: none;
transition: all 0.3s ease-in-out;
}
.inbdigital-join-box a:hover {
transform: scale(1.05);
}
.wa a {
background-color: #036728;
}
.tg a {
background-color: #025e8c;
}
.ig a {
background-color: #e1306c;
}
.inbdigital-join-box span {
display: flex;
align-items: center;
font-weight: bold;
}
.inbdigital-join-box.wa {
animation: wa-border-animation 1s infinite;
background-color: #ebfff5;
}
.inbdigital-join-box.tg {
animation: tg-border-animation 1s infinite;
background-color: #f0f8ff;
}
.inbdigital-join-box.ig {
animation: ig-border-animation 1s infinite;
background-color: #fff5f8;
}
@keyframes wa-border-animation {
0% {
border-color: #fff0;
}
50% {
border-color: #25d366;
}
100% {
border-color: #fff0;
}
}
@keyframes tg-border-animation {
0% {
border-color: #fff0;
}
50% {
border-color: #08c;
}
100% {
border-color: #fff0;
}
}
@keyframes ig-border-animation {
0% {
border-color: #fff0;
}
50% {
border-color: #e1306c;
}
100% {
border-color: #fff0;
}
}
Preview of the Result
You should see three animated buttons for WhatsApp, Telegram, and Instagram with the following features:
- Animated border color effects.
- Hover effect to enlarge the button slightly.
- Custom background colors for each platform.
This documentation provides everything needed to integrate animated social media join buttons on your website.