Social Media Share Buttons

snippet.publishedOn August 18, 2025 Beginner

A set of stylish social media share buttons with hover effects.

Live Preview

Code Implementation

HTML

<div class="social-share-buttons">
  <a href="#" class="social-btn facebook">Facebook</a>
  <a href="#" class="social-btn twitter">Twitter</a>
  <a href="#" class="social-btn linkedin">LinkedIn</a>
  <a href="#" class="social-btn pinterest">Pinterest</a>
</div>

CSS

.social-share-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.social-btn {
  padding: 10px 20px;
  border-radius: 5px;
  color: white;
  text-decoration: none;
  font-weight: bold;
  transition: transform 0.3s;
}

.social-btn:hover {
  transform: scale(1.1);
}

.facebook { background-color: #3b5998; }
.twitter { background-color: #1da1f2; }
.linkedin { background-color: #0077b5; }
.pinterest { background-color: #bd081c; }

JavaScript

document.addEventListener('DOMContentLoaded', () => {
  const socialButtons = document.querySelectorAll('.social-btn');
  socialButtons.forEach(button => {
    button.addEventListener('click', (e) => {
      e.preventDefault();
      const url = window.location.href;
      const text = document.title;
      const shareUrl = button.href;
      window.open(shareUrl + '?url=' + encodeURIComponent(url) + '&text=' + encodeURIComponent(text), '_blank');
    });
  });
});