CCHub Logo CCHub Tailwind Collection
Komponenten Social-Share-Schaltflächen Komponente "Social-Share-Buttons"

Komponente "Social-Share-Buttons"

Eine reaktionsschnelle Komponente für Social-Share-Buttons, die mit Glasmorphismus-Effekten gestaltet ist und sowohl helle als auch dunkle Themen unterstützt.

Vorschau

HTML-Code 

<div class="flex justify-center items-center p-6 bg-white dark:bg-gray-800 rounded-xl shadow-lg backdrop-blur-lg bg-opacity-30 border border-gray-300 dark:border-gray-600">
    <a href="https://facebook.com" class="flex items-center justify-center h-12 w-12 mx-2 rounded-full bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300 ease-in-out">
        <img src="https://picsum.photos/40/40?random=1" alt="Facebook" class="rounded-full">
    </a>
    <a href="https://twitter.com" class="flex items-center justify-center h-12 w-12 mx-2 rounded-full bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300 ease-in-out">
        <img src="https://picsum.photos/40/40?random=2" alt="Twitter" class="rounded-full">
    </a>
    <a href="https://linkedin.com" class="flex items-center justify-center h-12 w-12 mx-2 rounded-full bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300 ease-in-out">
        <img src="https://picsum.photos/40/40?random=3" alt="LinkedIn" class="rounded-full">
    </a>
    <a href="https://instagram.com" class="flex items-center justify-center h-12 w-12 mx-2 rounded-full bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300 ease-in-out">
        <img src="https://picsum.photos/40/40?random=4" alt="Instagram" class="rounded-full">
    </a>
</div>

<style>
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1F2937;
        }
    }
</style>

Verwandte Komponenten

Komponente "Social-Share-Buttons"

Social-Share-Buttons-Komponente mit Mikrointeraktionen, Graustufen-Farbschema, mäßiger Komplexität für Social-Media-Schnittstellen, responsives Design mit Unterstützung für dunkle Themen.

Offen

Komponente "Social-Share-Buttons"

Responsive Social-Share-Buttons im Glassmorphism-Stil und leuchtenden Farben, die für Blogs und den Konsum von Inhalten entwickelt wurden.

Offen

Brutalismus Social-Share-Buttons

Social-Share-Buttons-Komponente mit Brutalismus-Stil, responsiven Effekten und Unterstützung für dunkle Themen, kein Javascript erforderlich

Offen