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

Komponente "Social-Share-Buttons"

Eine einfache, reaktionsschnelle 3D-Graustufen-Social-Share-Button-Komponente für Dashboards mit Unterstützung des Dunkelmodus.

Vorschau

HTML-Code 

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 p-4">
    <!-- Facebook -->
    <a href="#" class="relative flex items-center justify-center p-4 bg-gray-300 dark:bg-gray-700 rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 group">
      <div class="absolute inset-0 bg-gray-400 dark:bg-gray-600 rounded-lg transform translate-x-1 translate-y-1 group-hover:translate-x-0 group-hover:translate-y-0 transition-transform duration-300"></div>
      <div class="relative text-gray-800 dark:text-gray-200 font-bold text-2xl z-10">F</div>
    </a>
    
    <!-- Twitter -->
    <a href="#" class="relative flex items-center justify-center p-4 bg-gray-300 dark:bg-gray-700 rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 group">
      <div class="absolute inset-0 bg-gray-400 dark:bg-gray-600 rounded-lg transform translate-x-1 translate-y-1 group-hover:translate-x-0 group-hover:translate-y-0 transition-transform duration-300"></div>
      <div class="relative text-gray-800 dark:text-gray-200 font-bold text-2xl z-10">T</div>
    </a>
    
    <!-- LinkedIn -->
    <a href="#" class="relative flex items-center justify-center p-4 bg-gray-300 dark:bg-gray-700 rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 group">
      <div class="absolute inset-0 bg-gray-400 dark:bg-gray-600 rounded-lg transform translate-x-1 translate-y-1 group-hover:translate-x-0 group-hover:translate-y-0 transition-transform duration-300"></div>
      <div class="relative text-gray-800 dark:text-gray-200 font-bold text-2xl z-10">in</div>
    </a>
    
    <!-- Instagram -->
    <a href="#" class="relative flex items-center justify-center p-4 bg-gray-300 dark:bg-gray-700 rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 group">
      <div class="absolute inset-0 bg-gray-400 dark:bg-gray-600 rounded-lg transform translate-x-1 translate-y-1 group-hover:translate-x-0 group-hover:translate-y-0 transition-transform duration-300"></div>
      <div class="relative text-gray-800 dark:text-gray-200 font-bold text-2xl z-10">I</div>
    </a>
  </div>
</div>

Verwandte Komponenten

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.

Offen

Komponente "Social-Share-Buttons"

Eine minimalistische Social-Share-Buttons-Komponente, die mit Tailwind CSS entwickelt wurde und ein responsives Layout und Unterstützung für dunkle Themen bietet. Die Komponente enthält Schaltflächen zum Teilen auf beliebten Social-Media-Plattformen mit klaren und einfachen Designelementen.

Offen

Komponente "Social-Share-Buttons"

Eine verspielte und unterhaltsame Social-Share-Button-Komponente, die für Gaming-Websites entwickelt wurde, mit einem Regenbogen-Farbschema mit Farbverlauf, abgerundeten Elementen und interaktiven Hover-Effekten. Vollständig reaktionsschnell mit Unterstützung des Dunkelmodus.

Offen