Animated Social Media Share Buttons

snippet.publishedOn August 22, 2025 Beginner

Modern social media sharing buttons with smooth animations and interactive effects, perfect for blog posts and content sharing.

#social-media #share #buttons #animation #interactive

Live Preview

Code Implementation

HTML

<div class="social-share-container">
  <div class="social-share-demo">
    <div class="share-header">
      <h3>Share this content</h3>
    </div>
    
    <div class="social-buttons" id="socialButtons">
      <button class="social-btn facebook" data-platform="facebook">
        <span class="btn-icon">f</span>
        <span class="btn-text">Share</span>
      </button>
      
      <button class="social-btn twitter" data-platform="twitter">
        <span class="btn-icon">t</span>
        <span class="btn-text">Tweet</span>
      </button>
      
      <button class="social-btn linkedin" data-platform="linkedin">
        <span class="btn-icon">in</span>
        <span class="btn-text">Share</span>
      </button>
      
      <button class="social-btn whatsapp" data-platform="whatsapp">
        <span class="btn-icon">w</span>
        <span class="btn-text">Send</span>
      </button>
      
      <button class="social-btn copy-link" data-platform="copy">
        <span class="btn-icon">🔗</span>
        <span class="btn-text">Copy</span>
      </button>
    </div>
    
    <div class="share-message" id="shareMessage"></div>
  </div>
</div>

CSS

.social-share-container {
  background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%);
  padding: 30px;
  border-radius: 20px;
  max-width: 600px;
  margin: 0 auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.social-share-demo {
  background: white;
  border-radius: 15px;
  padding: 25px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
}

.share-header {
  text-align: center;
  margin-bottom: 25px;
}

.share-header h3 {
  margin: 0;
  color: #333;
  font-size: 1.5rem;
  font-weight: 600;
}

.social-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
}

.social-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border: none;
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}

.social-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

.social-btn:active {
  transform: translateY(-1px);
}

.btn-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 12px;
  font-weight: bold;
  color: white;
}

.btn-text {
  color: white;
}

/* Platform specific styles */
.social-btn.facebook {
  background: linear-gradient(135deg, #3b5998 0%, #4267b2 100%);
}

.social-btn.twitter {
  background: linear-gradient(135deg, #1da1f2 0%, #0d8bd9 100%);
}

.social-btn.linkedin {
  background: linear-gradient(135deg, #0077b5 0%, #00a0dc 100%);
}

.social-btn.whatsapp {
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
}

.social-btn.copy-link {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Hover effects */
.social-btn.facebook:hover {
  background: linear-gradient(135deg, #344e86 0%, #3b5998 100%);
}

.social-btn.twitter:hover {
  background: linear-gradient(135deg, #1a91da 0%, #0c7abf 100%);
}

.social-btn.linkedin:hover {
  background: linear-gradient(135deg, #00669c 0%, #008cc9 100%);
}

.social-btn.whatsapp:hover {
  background: linear-gradient(135deg, #20b857 0%, #0e7a6d 100%);
}

.social-btn.copy-link:hover {
  background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
}

/* Ripple effect */
.social-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.social-btn.ripple::after {
  width: 200px;
  height: 200px;
}

.share-message {
  text-align: center;
  margin-top: 20px;
  min-height: 24px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.share-message.success {
  color: #27ae60;
}

.share-message.error {
  color: #e74c3c;
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.social-btn {
  animation: fadeIn 0.6s ease-out;
}

.social-btn:nth-child(1) { animation-delay: 0.1s; }
.social-btn:nth-child(2) { animation-delay: 0.2s; }
.social-btn:nth-child(3) { animation-delay: 0.3s; }
.social-btn:nth-child(4) { animation-delay: 0.4s; }
.social-btn:nth-child(5) { animation-delay: 0.5s; }

/* Responsive */
@media (max-width: 768px) {
  .social-share-container {
    padding: 20px;
  }
  
  .social-share-demo {
    padding: 20px;
  }
  
  .social-buttons {
    gap: 10px;
  }
  
  .social-btn {
    padding: 10px 15px;
    font-size: 0.8rem;
  }
  
  .btn-icon {
    width: 20px;
    height: 20px;
    font-size: 10px;
  }
}

@media (max-width: 480px) {
  .social-btn .btn-text {
    display: none;
  }
  
  .social-btn {
    padding: 12px;
  }
}

JavaScript

document.addEventListener('DOMContentLoaded', function() {
  // Get DOM elements
  const socialButtons = document.querySelectorAll('.social-btn');
  const shareMessage = document.getElementById('shareMessage');
  
  // Add event listeners to buttons
  socialButtons.forEach(button => {
    button.addEventListener('click', function() {
      const platform = this.getAttribute('data-platform');
      handleShare(platform);
      
      // Add ripple effect
      this.classList.add('ripple');
      setTimeout(() => {
        this.classList.remove('ripple');
      }, 600);
    });
  });
  
  // Handle sharing for each platform
  function handleShare(platform) {
    const url = window.location.href;
    const title = document.title;
    
    switch(platform) {
      case 'facebook':
        shareToFacebook(url);
        break;
      case 'twitter':
        shareToTwitter(url, title);
        break;
      case 'linkedin':
        shareToLinkedIn(url, title);
        break;
      case 'whatsapp':
        shareToWhatsApp(url, title);
        break;
      case 'copy':
        copyLink(url);
        break;
      default:
        showMessage('Unsupported platform', 'error');
    }
  }
  
  // Share to Facebook
  function shareToFacebook(url) {
    const facebookUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`;
    window.open(facebookUrl, '_blank', 'width=600,height=400');
    showMessage('Sharing to Facebook...', 'success');
  }
  
  // Share to Twitter
  function shareToTwitter(url, title) {
    const twitterUrl = `https://twitter.com/intent/tweet?url=${encodeURIComponent(url)}&text=${encodeURIComponent(title)}`;
    window.open(twitterUrl, '_blank', 'width=600,height=400');
    showMessage('Sharing to Twitter...', 'success');
  }
  
  // Share to LinkedIn
  function shareToLinkedIn(url, title) {
    const linkedinUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(url)}`;
    window.open(linkedinUrl, '_blank', 'width=600,height=400');
    showMessage('Sharing to LinkedIn...', 'success');
  }
  
  // Share to WhatsApp
  function shareToWhatsApp(url, title) {
    const whatsappUrl = `https://wa.me/?text=${encodeURIComponent(title + ' ' + url)}`;
    window.open(whatsappUrl, '_blank', 'width=600,height=400');
    showMessage('Sharing to WhatsApp...', 'success');
  }
  
  // Copy link to clipboard
  function copyLink(url) {
    navigator.clipboard.writeText(url).then(() => {
      showMessage('Link copied to clipboard!', 'success');
      
      // Change button text temporarily
      const copyButton = document.querySelector('.social-btn.copy-link');
      const originalText = copyButton.querySelector('.btn-text').textContent;
      copyButton.querySelector('.btn-text').textContent = 'Copied!';
      
      setTimeout(() => {
        copyButton.querySelector('.btn-text').textContent = originalText;
      }, 2000);
    }).catch(err => {
      showMessage('Failed to copy link', 'error');
      console.error('Failed to copy: ', err);
    });
  }
  
  // Show message
  function showMessage(text, type) {
    shareMessage.textContent = text;
    shareMessage.className = `share-message ${type}`;
    
    setTimeout(() => {
      shareMessage.textContent = '';
      shareMessage.className = 'share-message';
    }, 3000);
  }
});