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

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.

Vorschau

HTML-Code 

<div class="flex flex-col items-center p-5 bg-white bg-opacity-30 rounded-lg shadow-lg backdrop-blur-lg dark:bg-gray-800 dark:bg-opacity-40">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Share this Post</h2>
    <div class="flex space-x-4">
        <a href="#" class="flex items-center justify-center p-3 bg-red-500 rounded-full shadow-lg transform hover:scale-105 transition-transform duration-200"
           aria-label="Share on Facebook">
            <img src="https://picsum.photos/30/30" class="h-8 w-8 rounded-full" alt="Facebook">
            <span class="text-white ml-2">Facebook</span>
        </a>
        <a href="#" class="flex items-center justify-center p-3 bg-blue-500 rounded-full shadow-lg transform hover:scale-105 transition-transform duration-200"
           aria-label="Share on Twitter">
            <img src="https://picsum.photos/30/30" class="h-8 w-8 rounded-full" alt="Twitter">
            <span class="text-white ml-2">Twitter</span>
        </a>
        <a href="#" class="flex items-center justify-center p-3 bg-purple-500 rounded-full shadow-lg transform hover:scale-105 transition-transform duration-200"
           aria-label="Share on LinkedIn">
            <img src="https://picsum.photos/30/30" class="h-8 w-8 rounded-full" alt="LinkedIn">
            <span class="text-white ml-2">LinkedIn</span>
        </a>
    </div>
</div>

Verwandte Komponenten

Skeuomorphe Social-Share-Buttons

Responsive Social-Share-Buttons-Komponente mit skeuomorphem Design, monochromatischem Farbschema und komplexen Interaktionen mit Unterstützung für dunkle Themen. Entwickelt für Blogs und Content-Websites.

Offen

Retro-Schaltflächen zum Teilen in sozialen Netzwerken

Social-Share-Buttons-Komponente mit Retro-/Vintage-Design, responsiven Effekten und Unterstützung für dunkle Themen mit Tailwind CSS, kein JavaScript erforderlich.

Offen

Komponente "Social-Share-Buttons"

Eine Social-Share-Buttons-Komponente im Neumorphism-Stil, die für Geschäfts-/Unternehmenswebsites entwickelt wurde, Erdtöne verwendet und ein dunkles Thema unterstützt.

Offen