→ Marcus Thornton
→ Social Media Share Buttons

Social Media Share Buttons

A collection of social media share buttons allowing visitors to easily share your content across major platforms like Facebook, Twitter, LinkedIn, and Pinterest.

This Example is contributed by Marcus Thornton, on 26-Mar-2025. It is responsive.

Hover Effect Social Media Share Button SVG Icon

Author Marcus Thornton

Fork Fullscreen

<div class="social-share-container">
  <h4>Share this content</h4>
  <ul class="social-share-icons">
    <li>
      <a href="https://facebook.com/sharer/sharer.php?u=https://example.com" target="_blank" aria-label="Share on Facebook">
        <svg class="icon facebook" viewBox="0 0 24 24">
          <path d="M12 2C6.5 2 2 6.5 2 12c0 5 3.7 9.1 8.4 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.3v7C18.3 21.1 22 17 22 12c0-5.5-4.5-10-10-10z"/>
        </svg>
      </a>
    </li>
    <li>
      <a href="https://twitter.com/intent/tweet?url=https://example.com&text=Check%20this%20out!" target="_blank" aria-label="Share on Twitter">
        <svg class="icon twitter" viewBox="0 0 24 24">
          <path d="M22 4.01c-1 .49-1.98.689-3 .99-1.121-1.265-2.783-1.335-4.38-.737S11.977 6.323 12 8v1c-3.245.083-6.135-1.395-8-4 0 0-4.182 7.433 4 11-1.872 1.247-3.739 2.088-6 2 3.308 1.803 6.913 2.423 10.034 1.517 3.58-1.04 6.522-3.723 7.651-7.742a13.84 13.84 0 0 0 .497-3.753c0-.249 1.51-2.772 1.818-4.013z"/>
        </svg>
      </a>
    </li>
    <li>
      <a href="https://www.linkedin.com/sharing/share-offsite/?url=https://example.com" target="_blank" aria-label="Share on LinkedIn">
        <svg class="icon linkedin" viewBox="0 0 24 24">
          <path d="M20 3H4a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1zM8.339 18.337H5.667v-8.59h2.672v8.59zM7.003 8.574a1.548 1.548 0 1 1 0-3.096 1.548 1.548 0 0 1 0 3.096zm11.335 9.763h-2.669v-4.177c0-.996-.018-2.277-1.388-2.277-1.39 0-1.601 1.086-1.601 2.207v4.247h-2.667v-8.59h2.56v1.174h.037c.355-.675 1.227-1.387 2.524-1.387 2.704 0 3.203 1.778 3.203 4.092v4.71z"/>
        </svg>
      </a>
    </li>
    <li>
      <a href="https://pinterest.com/pin/create/button/?url=https://example.com&media=https://example.com/image.jpg&description=Check%20this%20out!" target="_blank" aria-label="Share on Pinterest">
        <svg class="icon pinterest" viewBox="0 0 24 24">
          <path d="M12 2C6.477 2 2 6.477 2 12c0 4.237 2.636 7.855 6.356 9.312-.088-.791-.167-2.005.035-2.868.181-.78 1.172-4.97 1.172-4.97s-.299-.6-.299-1.486c0-1.39.806-2.428 1.81-2.428.852 0 1.264.64 1.264 1.408 0 .858-.546 2.14-.828 3.33-.236.995.5 1.807 1.48 1.807 1.778 0 3.144-1.874 3.144-4.58 0-2.393-1.72-4.068-4.177-4.068-2.845 0-4.515 2.135-4.515 4.34 0 .859.331 1.781.745 2.281a.3.3 0 0 1 .069.288l-.278 1.133c-.044.183-.145.223-.335.134-1.249-.581-2.03-2.407-2.03-3.874 0-3.154 2.292-6.052 6.608-6.052 3.469 0 6.165 2.473 6.165 5.776 0 3.447-2.173 6.22-5.19 6.22-1.013 0-1.965-.525-2.291-1.148l-.623 2.378c-.226.869-.835 1.958-1.244 2.621.937.29 1.931.446 2.962.446 5.523 0 10-4.477 10-10S17.523 2 12 2z"/>
        </svg>
      </a>
    </li>
    <li>
      <a href="mailto:?subject=Check%20this%20out!&body=https://example.com" aria-label="Share via Email">
        <svg class="icon email" viewBox="0 0 24 24">
          <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
        </svg>
      </a>
    </li>
  </ul>
</div>

Related Examples

Social Share Icons for Websites
A collection of social media share buttons to help visitors share your content across popular platforms including Facebook, Twitter, LinkedIn, and more.

Author:
Maya Johnson

5 months ago
Social Media Icons Design

Author:
Anonymous

5 months ago
Social Media Icon Links

Author:
Eliza Stone

6 months ago
Social Sharing Component with Blog Post Details

Author:
Anonymous

5 months ago
Social Media Showcase with Counters
A modern social media sharing component featuring animated buttons, engagement metrics, and responsive design for easy integration into any website.

Author:
Alex Morgan

5 months ago
Customizable Mono-Color Social Buttons

Author:
Anonymous

3 months ago
Social Media Icon Buttons with Animated Tooltips
A set of social media icon buttons for Facebook, Twitter, and Instagram with platform name tooltips that appear on hover. Features smooth transitions, scale effects, and rounded corners for a polished look.

Author:
Marcus Hendricks

5 months ago
Interactive Hover Effect Navigation Links
A modern, animated list of links with smooth hover effects perfect for navigation menus, resource pages, or sidebar components.

Author:
Alexandra Sinclair

6 months ago
Social Media Icons Bar
A set of responsive social media icons for easy integration into your website. Includes popular platforms like Facebook, Twitter, Instagram, and LinkedIn.

Author:
Jaxon Green

6 months ago
Icon Buttons
A set of customizable buttons with integrated icons, perfect for enhancing user interface navigation and call-to-action elements.

Author:
Marcus Hendricks

5 months ago
Elegant Profile Hover Card with Animation Effects
A stylish hover card that reveals detailed user information with a smooth animation when hovering over a profile thumbnail.

Author:
Maya Johnson

5 months ago
Upvote Downvote Buttons with Alpine.js
A lightweight upvote and downvote button system built with Alpine.js, perfect for rating content on blogs, forums, or comment sections.

Author:
Marcus Thornton

5 months ago

Didn't find component you were looking for?

Search from 500+ components