Composants Boutons de partage social Composant Boutons de partage social

Composant Boutons de partage social

Un composant simple, réactif, en 3D en niveaux de gris pour les tableaux de bord avec prise en charge du mode sombre.

Aperçu

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>

Composants associés

Composant Boutons de partage social

Un composant skeuomorphic social share buttons conçu pour les sites Web de commerce électronique, doté d’une palette de couleurs en niveaux de gris et d’une prise en charge du mode sombre.

Ouvrir

Composant Boutons de partage social

Un composant réactif de boutons de partage social conçu avec un style skeuomorphique en niveaux de gris pour la consommation de contenu de blog. Inclut la prise en charge du mode sombre.

Ouvrir

Boutons de partage social

Composant de boutons de partage social réactif avec prise en charge du thème sombre, design brutaliste, schéma de couleurs analogue et interactions complexes, construit avec Tailwind CSS pour un site Web de portfolio.

Ouvrir