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

Skeuomorphe Social-Share-Buttons

Eine Reihe von Social-Share-Buttons, die mit einem Skeuomorphic-Design unter Verwendung von Tailwind CSS gestaltet sind. Verfügt über Farbverläufe, Schatten und Hover-/Aktiv-Effekte, um physische Tasten zu simulieren. Die Komponente ist reaktionsschnell und enthält Unterstützung für den Dunkelmodus über CSS. Enthält Schaltflächen für Facebook, Twitter, LinkedIn und eine generische Schaltfläche zum Kopieren von Links.

Vorschau

HTML-Code 

<div class="flex flex-wrap gap-4 p-6 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-xl">
  <!-- Facebook Button -->
  <a href="#" class="flex items-center justify-center px-6 py-3 bg-gradient-to-br from-blue-500 to-blue-700 text-white font-bold rounded-lg shadow-lg hover:shadow-xl active:shadow-md active:translate-y-0.5 transition duration-200 ease-in-out dark:from-blue-700 dark:to-blue-900 dark:shadow-blue-900/50 dark:hover:shadow-blue-900/70">
    <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"></path></svg>
    Share on Facebook
  </a>

  <!-- Twitter Button -->
  <a href="#" class="flex items-center justify-center px-6 py-3 bg-gradient-to-br from-cyan-400 to-cyan-600 text-white font-bold rounded-lg shadow-lg hover:shadow-xl active:shadow-md active:translate-y-0.5 transition duration-200 ease-in-out dark:from-cyan-600 dark:to-cyan-800 dark:shadow-cyan-800/50 dark:hover:shadow-cyan-800/70">
     <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26L21.69 17.25h-2.918l-5.451-5.66L8.29 17.25H1.997l7.226-8.26L2.1 2.25h3.308l5.249 5.4l5.45-5.4zM18.088 19.5H22V17.25h-1.774c-.381 0-.736-.188-.958-.548l-3.296-5.15h-2.35l4.739 7.4H18.088zM6.667 5.5c-.381 0-.736.188-.958.548L2.413 11.2h2.35l4.74-7.4zm13.5-3.25z"></path></svg>
    Share on Twitter
  </a>

   <!-- LinkedIn Button -->
   <a href="#" class="flex items-center justify-center px-6 py-3 bg-gradient-to-br from-blue-700 to-blue-900 text-white font-bold rounded-lg shadow-lg hover:shadow-xl active:shadow-md active:translate-y-0.5 transition duration-200 ease-in-out dark:from-blue-900 dark:to-blue-950 dark:shadow-blue-950/50 dark:hover:shadow-blue-950/70">
    <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M22 0H2v24h20V0zM8 19H5V8h3v11zM6.5 6.31C5.55 6.31 4.8 5.56 4.8 4.6S5.55 2.9 6.5 2.9s1.7 0.76 1.7 1.7S7.45 6.31 6.5 6.31zm15.5 12.69h-3v-5.6c0-1.3-.5-2.6-2-2.6-1.2 0-2 0.8-2 2v5.6h-3V8h3v1.5c0.5-0.8 1.6-1.5 3-1.5 2.5 0 4 1.6 4 5.8v6.2z"></path></svg>
    Share on LinkedIn
  </a>

  <!-- Generic Share Button (Copy Link) -->
   <a href="#" class="flex items-center justify-center px-6 py-3 bg-gradient-to-br from-teal-500 to-teal-700 text-white font-bold rounded-lg shadow-lg hover:shadow-xl active:shadow-md active:translate-y-0.5 transition duration-200 ease-in-out dark:from-teal-700 dark:to-teal-900 dark:shadow-teal-900/50 dark:hover:shadow-teal-900/70">
    <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M18 16.685v-5.008l4-3.997-4-3.997v-5.008h-8v5.005l4 3.994-4 3.994v5.005h8z m-6-1.769v-5.005l-4-3.994 4-3.994v-5.005h-8v5.008l4 3.997-4 3.997v5.008h8z"></path></svg>
    Copy Link
  </a>
</div>

Verwandte Komponenten

Skeuomorphe Erdtöne Social-Share-Buttons

Eine Reihe von Social-Share-Buttons, die in einem Skeuomorphen Design mit Erdtönen gestaltet sind. Zu den Funktionen gehören responsives Layout und Unterstützung des Dunkelmodus mit interaktiven Presseeffekten beim Hover, die ausschließlich mit HTML- und Tailwind-CSS-Klassen erstellt wurden.

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

Social-Share-Buttons Komponente 51

Eine reaktionsschnelle Social-Share-Buttons-Komponente, die nach skeuomorphen Designprinzipien entwickelt wurde, mit Schaltflächen, die reale Objekte nachahmen, und Unterstützung für dunkle Themen. Die Komponente wird mit Tailwind CSS formatiert und enthält Platzhalterbilder aus picsum.photos und Avatare aus randomuser.me.

Offen