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"

Eine reaktionsschnelle Social-Share-Buttons-Komponente mit einem skeuomorphen Designstil, der reale Gegenstücke nachahmt, mit Unterstützung für dunkle Themen.

Offen

Social-Share-Schaltflächen

Social-Share-Buttons mit responsivem Design, Unterstützung für dunkle Themen und 3D-Ästhetik. Kein JavaScript erforderlich.

Offen

Komponente "Social-Share-Buttons"

Eine Reihe von lebendigen, 3D-inspirierten Social-Share-Buttons, die für Food- und Restaurant-Websites geeignet sind, mit voller Reaktionsfähigkeit und Unterstützung des Dunkelmodus.

Offen