Category · Call to Action Difficulty Level · Beginner Published on · August 18, 2025

Social Media Share Buttons

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

#social #media #share #buttons #hover

Responsive Design

Yes

Dark Mode Support

lines

Browser Compatibility

Chrome · Firefox · Safari · Edge

Live Preview

Interact with the component without leaving the page.

150px

Overview

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

How to use

Copy the HTML markup into your page.
Paste the CSS into your stylesheet and ensure the selectors match your markup.
Paste the JavaScript and load it after the markup.
Adjust spacing, colors, and text to match your design system.

Customization tips

Rename class names to avoid collisions with your existing CSS.
Replace hard-coded colors with CSS variables for theming.
Verify the layout at 320px, 768px, and 1024px widths.

HTML

lines

CSS

lines

JavaScript

lines

                <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>

              

                .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; }

              

                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');
    });
  });
});

              