How to add Animation Social Media Join Buttons on your WordPress website

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:

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.

Leave a Comment

WhatsApp Chat