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

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"

Social-Share-Buttons-Komponente mit Brutalismus-Stil, responsiven Effekten und Unterstützung für dunkle Themen mit Tailwind CSS.

Offen

Komponente "Social-Share-Buttons"

Social Share Buttons-Komponente mit Retro / Vintage-Design, Farbschema in Erdtönen, einfacher Komplexitätsstufe und responsivem Design mit Unterstützung für dunkle Themen für Social-Media-Zwecke mit Tailwind CSS.

Offen