Social Share Buttons

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

<div class="social-share-container-1">
        
        <ul class="social-share-list-1">
            <li>
                
                <a href="https://twitter.com/intent/tweet?url=YOUR_URL&amp;text=YOUR_TEXT" class="share-btn-1 x" aria-label="Share on X" target="_blank" rel="noopener noreferrer">
                    <svg viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
                </a>
            </li>
            <li>
                
                <a href="https://www.facebook.com/sharer/sharer.php?u=YOUR_URL" class="share-btn-1 facebook" aria-label="Share on Facebook" target="_blank" rel="noopener noreferrer">
                    <svg viewBox="0 0 24 24"><path d="M9 8h-3v4h3v12h5V12h3.642L18 8h-4V6.333c0-.953.375-1.333 1.118-1.333h2.882V1H16c-3.86 0-5 2.222-5 5v2z"/></svg>
                </a>
            </li>
            <li>
                
                <a href="https://www.linkedin.com/sharing/share-offsite/?url=YOUR_URL" class="share-btn-1 linkedin" aria-label="Share on LinkedIn" target="_blank" rel="noopener noreferrer">
                    <svg viewBox="0 0 24 24"><path d="M4.98 3.5c0 1.381-1.11 2.5-2.48 2.5s-2.48-1.119-2.48-2.5c0-1.38 1.11-2.5 2.48-2.5s2.48 1.12 2.48 2.5zm.02 4.5h-5v16h5v-16zm7.982 0h-4.968v16h4.969v-8.399c0-2.199 1.564-4.045 4.015-4.045 2.225 0 2.985 1.587 2.985 3.961v8.483h4.984v-8.825c0-4.34-2.146-7.678-6.669-7.678-3.085 0-4.816 1.765-5.613 2.925h-.03v-2.42h-4.996z"/></svg>
                </a>
            </li>
            <li>
                
                <a href="http://www.reddit.com/submit?url=YOUR_URL&amp;title=YOUR_TITLE" class="share-btn-1 reddit" aria-label="Share on Reddit" target="_blank" rel="noopener noreferrer">
                    <svg viewBox="0 0 24 24"><path d="M12 0C5.373 0 0 5.373 0 12c0 3.314 1.343 6.314 3.515 8.485l-2.286 2.286C.775 23.225 1.097 24 1.738 24H12c6.627 0 12-5.373 12-12S18.627 0 12 0Zm4.388 3.199c1.104 0 1.999.895 1.999 1.999 0 1.105-.895 2-1.999 2-.946 0-1.739-.657-1.947-1.539v.002c-1.147.162-2.032 1.15-2.032 2.341v.007c1.776.067 3.4.567 4.686 1.363.473-.363 1.064-.58 1.707-.58 1.547 0 2.802 1.254 2.802 2.802 0 1.117-.655 2.081-1.601 2.531-.088 3.256-3.637 5.876-7.997 5.876-4.361 0-7.905-2.617-7.998-5.87-.954-.447-1.614-1.415-1.614-2.538 0-1.548 1.255-2.802 2.803-2.802.645 0 1.239.218 1.712.585 1.275-.79 2.881-1.291 4.64-1.365v-.01c0-1.663 1.263-3.034 2.88-3.207.188-.911.993-1.595 1.959-1.595Zm-8.085 8.376c-.784 0-1.459.78-1.506 1.797-.047 1.016.64 1.429 1.426 1.429.786 0 1.371-.369 1.418-1.385.047-1.017-.553-1.841-1.338-1.841Zm7.406 0c-.786 0-1.385.824-1.338 1.841.047 1.017.634 1.385 1.418 1.385.785 0 1.473-.413 1.426-1.429-.046-1.017-.721-1.797-1.506-1.797Zm-3.703 4.013c-.974 0-1.907.048-2.77.135-.147.015-.241.168-.183.305.483 1.154 1.622 1.964 2.953 1.964 1.33 0 2.47-.81 2.953-1.964.057-.137-.037-.29-.184-.305-.863-.087-1.795-.135-2.769-.135Z"/></svg>
                </a>
            </li>
            <li>
                
                <a href="https://api.whatsapp.com/send?text=YOUR_TEXT%20YOUR_URL" class="share-btn-1 whatsapp" aria-label="Share on WhatsApp" target="_blank" rel="noopener noreferrer">
                    <svg viewBox="0 0 24 24"><path d="M20.1 3.9C17.9 1.7 15 .5 12 .5 5.8.5.7 5.6.7 11.9c0 2 .5 3.9 1.5 5.6L.6 23.4l6.1-1.6c1.6.9 3.5 1.5 5.3 1.5h.1c6.3 0 11.4-5.1 11.4-11.4-.1-2.8-1.2-5.7-3.3-7.8zM12 21.4c-1.7 0-3.3-.5-4.8-1.3l-.4-.2-3.5.9.9-3.4-.2-.4c-.8-1.4-1.2-3-1.2-4.6 0-5.2 4.2-9.4 9.4-9.4 2.5 0 4.9 1 6.7 2.8 1.8 1.8 2.8 4.2 2.8 6.7-.1 5.2-4.3 9.4-9.4 9.4zm5.1-7.1c-.3-.1-1.7-.9-1.9-1-.2-.1-.4-.1-.6.1-.2.2-.8 1-.9 1.1-.1.2-.2.2-.4.1-.6-.2-1.2-.5-2.2-1.3-.8-.6-1.3-1.4-1.5-1.6-.2-.2 0-.4.1-.5.1-.1.2-.2.4-.4.1-.1.2-.2.2-.4.1-.1.1-.3 0-.4-.1-.1-.6-1.4-.8-1.9-.2-.5-.4-.4-.6-.4h-.6c-.2 0-.5.1-.7.3-.2.2-.8.8-.8 1.9s.8 2.2.9 2.4c.1.2 1.7 2.5 4 3.5.5.2.9.3 1.2.5.3.2.6.1.8.1.2-.1.5-.3.7-.5.2-.2.2-.4.1-.5z"/></svg>
                </a>
            </li>
        </ul>
    </div>

</body>
</html>