How To Create a sticky WhatsApp & Telegram Join Buttons

How to Use:

1. Replace the WhatsApp and Telegram group invite links with your actual links in the href attributes.
2. You can customize the button text, background colors, and emoji if needed.

This design ensures that both buttons are fully responsive, animated, and attention-grabbing while looking great on all screen sizes, particularly on smartphones.

How To Create a sticky WhatsApp & Telegram Join Buttons

<!-- Sticky Buttons Container -->
<div style="position: fixed; bottom: 20px; right: 20px; z-index: 1000; display: flex; flex-direction: column; gap: 10px; align-items: center;">

    <!-- WhatsApp Join Button -->
    <a href="https://chat.whatsapp.com/your-whatsapp-group-invite-link" target="_blank" 
       style="
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #25D366;
            color: white;
            text-decoration: none;
            padding: 12px 24px;
            border-radius: 50px;
            font-size: 16px;
            font-family: Arial, sans-serif;
            text-align: center;
            box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease-in-out;
            animation: pulse 2s infinite;
            width: auto;
        ">

        <!-- WhatsApp Logo -->
        <span style="display: inline-block; margin-right: 8px;">
            <img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg" 
                 alt="WhatsApp" style="width: 20px; height: 20px; vertical-align: middle;">
        </span>

        <!-- Text with Emoji -->
        <span>Join WhatsApp Group <span style="font-size: 22px; margin-left: 5px; animation: bounceEmoji 1.5s infinite;">👉</span></span>
    </a>

    <!-- Telegram Join Button -->
    <a href="https://t.me/your-telegram-group-invite-link" target="_blank" 
       style="
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #0088cc;
            color: white;
            text-decoration: none;
            padding: 12px 24px;
            border-radius: 50px;
            font-size: 16px;
            font-family: Arial, sans-serif;
            text-align: center;
            box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease-in-out;
            animation: pulse 2s infinite;
            width: auto;
        ">

        <!-- Telegram Logo -->
        <span style="display: inline-block; margin-right: 8px;">
            <img src="https://upload.wikimedia.org/wikipedia/commons/8/82/Telegram_logo.svg" 
                 alt="Telegram" style="width: 20px; height: 20px; vertical-align: middle;">
        </span>

        <!-- Text with Emoji -->
        <span>Join Telegram Group <span style="font-size: 22px; margin-left: 5px; animation: bounceEmoji 1.5s infinite;">👉</span></span>
    </a>

</div>

<style>
    /* Pulse animation for both buttons */
    @keyframes pulse {
        0% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.05);
        }
        100% {
            transform: scale(1);
        }
    }

    /* Bounce animation for the emoji */
    @keyframes bounceEmoji {
        0%, 100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-5px);
        }
    }

    /* Hover effect for desktop (won't activate on smartphones) */
    a:hover {
        transform: translateY(-5px);
        box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);
    }

    /* Responsive design for mobile */
    @media (max-width: 768px) {
        a {
            font-size: 14px;
            padding: 10px 20px;
        }

        img {
            width: 18px;
            height: 18px;
        }
    }

    /* Extra small devices (phones, less than 600px) */
    @media (max-width: 600px) {
        a {
            font-size: 12px;
            padding: 8px 16px;
        }

        img {
            width: 16px;
            height: 16px;
        }
    }
</style>

Key Features:

1. Sticky Buttons:
   • The buttons are placed at the bottom-right corner of the screen with position: fixed so they remain visible as users scroll.
2. Pulsing Animation:
   • Each button has a pulsing animation (@keyframes pulse) to catch attention, making it grow and shrink slightly.
3. Animated Emojis:
   • A pointing finger emoji (👉) next to each button’s text has a bounce animation (@keyframes bounceEmoji) to encourage users to click.
4. Mobile-Responsive Design:
   • The buttons automatically adjust their size for different screen sizes. Media queries handle tablet-sized devices (max-width: 768px) and small smartphones (max-width: 600px) by reducing the button size, font size, and icon size for a clean, compact look.
5. WhatsApp & Telegram Logos:
   • Each button includes the appropriate logo for easy recognition.