Composants Boutons de partage social Composant Boutons de partage social

Composant Boutons de partage social

Un composant de boutons de partage social de style Neumorphism conçu pour les sites Web d’entreprise, utilisant des tons de terre et prenant en charge un thème sombre.

Aperçu

HTML Code

<div class="flex justify-center items-center p-5 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg">
    <a href="#" class="flex items-center justify-center w-12 h-12 rounded-full bg-white dark:bg-gray-900 shadow-neumorphism hover:shadow-neumorphism-hover transition-shadow duration-300">
        <img src="https://picsum.photos/seed/facebook/40/40" alt="Facebook" class="w-full h-full rounded-full object-cover" />
    </a>
    <a href="#" class="flex items-center justify-center w-12 h-12 mx-4 rounded-full bg-white dark:bg-gray-900 shadow-neumorphism hover:shadow-neumorphism-hover transition-shadow duration-300">
        <img src="https://picsum.photos/seed/twitter/40/40" alt="Twitter" class="w-full h-full rounded-full object-cover" />
    </a>
    <a href="#" class="flex items-center justify-center w-12 h-12 rounded-full bg-white dark:bg-gray-900 shadow-neumorphism hover:shadow-neumorphism-hover transition-shadow duration-300">
        <img src="https://picsum.photos/seed/linkedin/40/40" alt="LinkedIn" class="w-full h-full rounded-full object-cover" />
    </a>
</div>

<style>
    .shadow-neumorphism {
        box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.2), -8px -8px 20px rgba(255, 255, 255, 0.7);
    }
    .shadow-neumorphism-hover {
        box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.3), -4px -4px 12px rgba(255, 255, 255, 0.5);
    }
</style>

Composants associés

Boutons de partage social

Composant de boutons de partage social avec design Glassmorphism, effets réactifs et prise en charge du thème sombre. Aucun JavaScript n’est utilisé.

Ouvrir

Brutalisme Boutons de partage social

Composant de boutons de partage social avec style brutalisme, effets réactifs et prise en charge du thème sombre, pas besoin de javascript

Ouvrir

Skeuomorphic Boutons de partage social

Un ensemble de boutons de partage social stylisés avec un design Skeuomorphic utilisant Tailwind CSS. Comprend des dégradés, des ombres et des effets de survol/actif pour simuler des boutons physiques. Le composant est réactif et inclut la prise en charge du mode sombre via CSS. Contient des boutons pour Facebook, Twitter, LinkedIn et un bouton générique de copie de lien.

Ouvrir