Membuat Tombol WhatsApp dengan HTML & CSS

<!-- Sticky Contact Bar - Middle Right -->
<div class="fixed right-0 top-1/2 transform -translate-y-1/2 z-50 flex flex-col gap-3 pr-3">
    <!-- Call Button -->
    <a href="tel:6285710341394" 
       class="call-button group flex items-center justify-end gap-2 bg-white hover:bg-primary/5 text-primary transition-all duration-300 rounded-l-xl border-2 border-r-0 border-primary overflow-hidden"
       onclick="trackCallClick()">
        <span class="max-w-0 group-hover:max-w-[120px] overflow-hidden transition-all duration-500 whitespace-nowrap">
            Telepon
        </span>
        <div class="flex items-center justify-center w-12 h-12">
            <svg class="w-5 h-5 transition-transform group-hover:rotate-12" 
                 fill="none" 
                 stroke="currentColor" 
                 viewBox="0 0 24 24">
                <path stroke-linecap="round" 
                      stroke-linejoin="round" 
                      stroke-width="2" 
                      d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
            </svg>
        </div>
    </a>

    <!-- WhatsApp Button -->
    <a href="https://wa.me/6285710341394?text=Halo, saya tertarik dengan properti dari Citra Garden Bintaro" 
       target="_blank" 
       rel="noopener noreferrer" 
       class="whatsapp-button group flex items-center justify-end gap-2 bg-green-500 hover:bg-green-600 text-white transition-all duration-300 rounded-l-xl shadow-lg hover:shadow-xl overflow-hidden"
       onclick="trackWhatsAppClick(event)"
       data-operating-hours="09:00-21:00">
        <span class="max-w-0 group-hover:max-w-[120px] overflow-hidden transition-all duration-500 whitespace-nowrap">
            WhatsApp
        </span>
        <div class="flex items-center justify-center w-12 h-12 relative">
            <!-- Operating Hours Indicator -->
            <div class="absolute top-1 right-1 w-2 h-2 rounded-full transition-colors duration-300"
                 id="operatingStatus">
            </div>
            <!-- WhatsApp Icon -->
            <svg class="w-5 h-5 transition-transform group-hover:-rotate-12" 
                 fill="currentColor" 
                 viewBox="0 0 24 24">
                <path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.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.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.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.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z"/>
            </svg>
        </div>
    </a>
</div>

<script>
// Contact Buttons Functionality
const ContactButtons = {
    config: {
        operatingHours: {
            start: 9,
            end: 21,
            timezone: 'Asia/Jakarta'
        },
        phoneNumber: '6285710341394',
        whatsappMessage: 'Halo, saya tertarik dengan properti dari Citra Garden Bintaro'
    },

    init() {
        this.updateOperatingStatus();
        setInterval(() => this.updateOperatingStatus(), 60000);
    },

    isOperatingHours() {
        const now = new Date().toLocaleString('en-US', { timeZone: this.config.operatingHours.timezone });
        const hours = new Date(now).getHours();
        return hours >= this.config.operatingHours.start && hours < this.config.operatingHours.end;
    },

    updateOperatingStatus() {
        const statusDot = document.getElementById('operatingStatus');
        const whatsappButton = document.querySelector('.whatsapp-button');
        const isOpen = this.isOperatingHours();

        if (statusDot) {
            statusDot.style.backgroundColor = isOpen ? '#4ade80' : '#ef4444';
            statusDot.title = isOpen ? 'Online' : 'Offline';
        }

        if (whatsappButton) {
            whatsappButton.title = isOpen ? 'Chat dengan kami' : 
                `Jam operasional: ${this.config.operatingHours.start}:00 - ${this.config.operatingHours.end}:00`;
        }
    },

    trackWhatsAppClick(event) {
        event.preventDefault();
        const button = event.currentTarget;

        if (!this.isOperatingHours()) {
            this.showToast(`Jam operasional kami ${this.config.operatingHours.start}:00 - ${this.config.operatingHours.end}:00`);
            return;
        }

        // Animation and redirect
        button.classList.add('scale-95');
        setTimeout(() => {
            button.classList.remove('scale-95');
            window.open(button.href, '_blank');
        }, 200);

        // Analytics tracking
        console.log('WhatsApp button clicked');
    },

    showToast(message) {
        const toast = document.createElement('div');
        toast.className = 'fixed bottom-4 right-4 bg-white text-gray-800 px-6 py-3 rounded-lg shadow-xl z-50 animate-fade-in';
        toast.textContent = message;
        
        document.body.appendChild(toast);
        setTimeout(() => {
            toast.classList.add('animate-fade-out');
            setTimeout(() => toast.remove(), 300);
        }, 3000);
    }
};

// Initialize
ContactButtons.init();

// Event Listeners
document.querySelector('.whatsapp-button').addEventListener('click', (e) => ContactButtons.trackWhatsAppClick(e));
</script>

<style>
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(1rem); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

.animate-fade-in {
    animation: fadeIn 0.3s ease-out;
}

.animate-fade-out {
    animation: fadeOut 0.3s ease-out;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.max-w-0 {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.max-w-0::-webkit-scrollbar {
    display: none;
}

/* Smooth transitions */
.transition-max-width {
    transition: max-width 0.5s ease-in-out;
}
</style>