Social Share Buttons Template

Encourage visitors to share your content with this clean and recognizable set of social media buttons.

This component provides a familiar way for users to post links to your page on their favorite platforms, helping to increase your content's reach.

Get Source Code Preview

About Social Share Buttons

Placing social share buttons on your articles, products, or key pages makes it effortless for your audience to become brand advocates. This template includes a selection of popular platforms, each styled with its official brand color for immediate recognition. The buttons are crafted as icon-only to maintain a compact and clean design.

Features

Multiple Platforms: Includes buttons for X (formerly Twitter), Facebook, LinkedIn, Reddit, and WhatsApp.
Self-Contained SVGs: Each brand logo is an inline svg, so no external files or font libraries are needed.
Accessibility First: Each link includes a descriptive aria-label (e.g., "Share on X"). This is essential for screen reader users to understand the function of each icon-only button.
Responsive Layout: Uses Flexbox to align the buttons, allowing them to wrap gracefully onto the next line on smaller screens.
Ready-to-Use Links: The a element's href attribute for each button is pre-filled with the correct sharing URL structure. You just need to replace the placeholders with your page's data.

Code Breakdown

The component is structured semantically as a ul, as it is a list of links. The list is styled with display: flex to create the horizontal layout, and the flex-wrap property is set to wrap to handle responsiveness. Each list item contains a link styled to be a circular button.

The brand colors are defined in a :root block using CSS Custom Properties (e.g., --share-x-bg). This makes it easy to update colors if a brand changes its palette. The SVG icons are styled to fill their container and inherit the button's text color, which is set to white for high contrast against the branded backgrounds.

Code

Here is the complete code for the social share buttons component.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Social Share Buttons</title>
    <style>
        /*
         Component: Social Share Buttons
         Description: A set of icon-only buttons for sharing content on social media.
        */

:root {
            /* Brand background colors */
            --share-x-bg: #000000;
            --share-facebook-bg: #1877F2;
            --share-linkedin-bg: #0077B5;
            --share-reddit-bg: #FF4500;
            --share-whatsapp-bg: #25D366;
            
            /* General styles */
            --share-icon-color: #ffffff;
            --share-focus-outline: #007bff;
        }

.social-share-container-1 {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 2rem;
            background-color: #ffffff; /* Example background */
        }

.social-share-list-1 {
            display: flex;
            flex-wrap: wrap; /* Allows buttons to wrap on small screens */
            justify-content: center;
            gap: 1rem;
            list-style-type: none;
            padding: 0;
            margin: 0;
        }

.share-btn-1 {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            color: var(--share-icon-color);
            text-decoration: none;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            box-shadow: 0 2px 5px rgba(0,0,0,0.15);
        }

.share-btn-1:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
        }
        
        .share-btn-1:focus-visible {
            outline: 3px solid var(--share-focus-outline);
            outline-offset: 3px;
        }

.share-btn-1 svg {
            width: 24px;
            height: 24px;
            fill: currentColor;
        }
        
        /* Apply brand background colors */
        .share-btn-1.x { background-color: var(--share-x-bg); }
        .share-btn-1.facebook { background-color: var(--share-facebook-bg); }
        .share-btn-1.linkedin { background-color: var(--share-linkedin-bg); }
        .share-btn-1.reddit { background-color: var(--share-reddit-bg); }
        .share-btn-1.whatsapp { background-color: var(--share-whatsapp-bg); }

</style>
</head>
<body>

</body>
</html>

View Output