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é.
HTML Code
<div class="flex justify-center items-center h-screen bg-gray-100 dark:bg-gray-900">
<div class="flex space-x-4 p-4 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-xl shadow-lg backdrop-filter backdrop-blur-lg">
<a href="#" class="p-3 rounded-full bg-white bg-opacity-50 dark:bg-gray-800 dark:bg-opacity-50 text-gray-800 dark:text-white hover:scale-110 transition duration-300">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.367 8.367 0 01-2.605.996 4.103 4.103 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.273 4.134 4.134 0 001.27 5.51A4.073 4.073 0 01.8 7.71v.057a4.1 4.1 0 003.294 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path>
</svg>
</a>
<a href="#" class="p-3 rounded-full bg-white bg-opacity-50 dark:bg-gray-800 dark:bg-opacity-50 text-gray-800 dark:text-white hover:scale-110 transition duration-300">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.83 9.5v-6.533H5.933V12.017H8.83v-2.57c0-3.518 2.13-5.425 5.242-5.425 1.493 0 2.99.22 2.99.22v3.293h-1.68c-1.63.005-2.16.94-2.16 1.902v2.753h3.332l-.533 3.44H14.17V21.5c3.966-1.32 6.83-5.077 6.83-9.483C22 6.484 17.523 2 12 2z" clip-rule="evenodd"></path>
</svg>
</a>
<a href="#" class="p-3 rounded-full bg-white bg-opacity-50 dark:bg-gray-800 dark:bg-opacity-50 text-gray-800 dark:text-white hover:scale-110 transition duration-300">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12.964 0H1.036C.465 0 0 .465 0 1.036v11.928c0 .571.465 1.036 1.036 1.036h11.928c.571 0 1.036-.465 1.036-1.036V1.036C14 0 .571 0 12.964 0zM4.568 11.669H2.473V4.05H4.568v7.619zM3.52 3.012c-.775 0-1.411-.636-1.411-1.416 0-.78.636-1.416 1.411-1.416.776 0 1.411.636 1.411 1.416 0 .78-.635 1.416-1.411 1.416zM11.668 11.669H9.57v-3.48c0-.831-.015-1.898-1.158-1.898-1.16 0-1.334.904-1.334 1.84v3.538H5.091V4.05h2.008v.92h.028c.277-.529.959-1.083 1.984-1.083 2.121 0 2.518 1.392 2.518 3.191v7.68z" clip-rule="evenodd"></path>
</svg>
</a>
</div>
</div>Composants associés
Composant Boutons de partage social
Un composant rétro/vintage des boutons de partage social avec une palette de couleurs monochromatiques. Il s’agit d’un design complexe et réactif avec prise en charge du thème sombre, adapté à un portefeuille. Utilise Tailwind CSS sans JavaScript.
Composant Boutons de partage social
Composant avec micro-interactions, schéma de couleurs en niveaux de gris, complexité modérée pour les interfaces de médias sociaux, conception réactive avec prise en charge du thème sombre.
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