Composant Boutons de partage social
Composant de boutons de partage social avec style Brutalism, effets réactifs et prise en charge du thème sombre à l’aide de Tailwind CSS.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-zinc-100 dark:bg-zinc-900 p-8">
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 border-4 border-zinc-900 dark:border-zinc-100 p-4 bg-white dark:bg-zinc-800 shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff]">
<button class="flex items-center justify-center p-4 font-bold uppercase text-zinc-900 dark:text-zinc-100 bg-blue-500 hover:bg-blue-700 border-2 border-zinc-900 dark:border-zinc-100 transition duration-300 ease-in-out transform hover:translate-x-1 hover:-translate-y-1">
<svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.21-" /></svg>
Twitter
</button>
<button class="flex items-center justify-center p-4 font-bold uppercase text-zinc-900 dark:text-zinc-100 bg-blue-700 hover:bg-blue-900 border-2 border-zinc-900 dark:border-zinc-100 transition duration-300 ease-in-out transform hover:translate-x-1 hover:-translate-y-1">
<svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.21-" /></svg>
Facebook
</button>
<button class="flex items-center justify-center p-4 font-bold uppercase text-zinc-900 dark:text-zinc-100 bg-red-600 hover:bg-red-800 border-2 border-zinc-900 dark:border-zinc-100 transition duration-300 ease-in-out transform hover:translate-x-1 hover:-translate-y-1">
<svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.21-" /></svg>
Instagram
</button>
<button class="flex items-center justify-center p-4 font-bold uppercase text-zinc-900 dark:text-" class="flex items-center justify-center p-4 font-bold uppercase text-zinc-900 dark:text-zinc-100 bg-blue-900 hover:bg-blue-950 border-2 border-zinc-900 dark:border-zinc-100 transition duration-300 ease-in-out transform hover:translate-x-1 hover:-translate-y-1">
<svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.21-" /></svg>
LinkedIn
</button>
</div>
</div>Composants associés
Boutons de partage social
Boutons de partage social dotés d’un design réactif, d’une prise en charge du thème sombre et d’une esthétique 3D. Aucun JavaScript n’est requis.
Skeuomorphic Earth Tone Boutons de partage social
Un ensemble de boutons de partage social stylisés dans un design Skeuomorphic utilisant des tons de terre. Les fonctionnalités incluent une mise en page réactive et la prise en charge du mode sombre avec des effets de presse interactifs au survol, construits uniquement avec des classes HTML et Tailwind CSS.
Composant Boutons de partage social
Un composant réactif de boutons de partage social avec un style de conception skeuomorphe qui imite ses homologues du monde réel, avec la prise en charge du thème sombre.