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.
HTML Code
<div class="bg-gray-100 dark:bg-gray-900 p-8 min-h-screen flex items-center justify-center">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
<!-- Social Share Button 1 -->
<div class="bg-white dark:bg-gray-800 border-4 border-black dark:border-white p-6 shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] transform transition-transform duration-200 hover:scale-105">
<div class="flex items-center space-x-4">
<div class="text-yellow-500 text-3xl">
<i class="fab fa-twitter"></i>
</div>
<div>
<h3 class="text-xl font-bold text-gray-900 dark:text-white">Share on Twitter</h3>
<p class="text-gray-600 dark:text-gray-400">Spread the word!</p>
</div>
</div>
<button class="mt-6 w-full bg-yellow-500 text-black py-3 px-4 border-2 border-black dark:border-white font-bold text-lg transform translate-x-1 translate-y-1 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff] hover:translate-x-0 hover:translate-y-0 hover:shadow-none transition-all duration-200">
Tweet
</button>
</div>
<!-- Social Share Button 2 -->
<div class="bg-white dark:bg-gray-800 border-4 border-black dark:border-white p-6 shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] transform transition-transform duration-200 hover:scale-105">
<div class="flex items-center space-x-4">
<div class="text-orange-500 text-3xl">
<i class="fab fa-facebook-f"></i>
</div>
<div>
<h3 class="text-xl font-bold text-gray-900 dark:text-white">Share on Facebook</h3>
<p class="text-gray-600 dark:text-gray-400">Connect with friends!</p>
</div>
</div>
<button class="mt-6 w-full bg-orange-500 text-black py-3 px-4 border-2 border-black dark:border-white font-bold text-lg transform translate-x-1 translate-y-1 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff] hover:translate-x-0 hover:translate-y-0 hover:shadow-none transition-all duration-200">
Share
</button>
</div>
<!-- Social Share Button 3 -->
<div class="bg-white dark:bg-gray-800 border-4 border-black dark:border-white p-6 shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] transform transition-transform duration-200 hover:scale-105">
<div class="flex items-center space-x-4">
<div class="text-red-500 text-3xl">
<i class="fab fa-pinterest-p"></i>
</div>
<div>
<h3 class="text-xl font-bold text-gray-900 dark:text-white">Share on Pinterest</h3>
<p class="text-gray-600 dark:text-gray-400">Inspire others!</p>
</div>
</div>
<button class="mt-6 w-full bg-red-500 text-black py-3 px-4 border-2 border-black dark:border-white font-bold text-lg transform translate-x-1 translate-y-1 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff] hover:translate-x-0 hover:translate-y-0 hover:shadow-none transition-all duration-200">
Pin It
</button>
</div>
<!-- Social Share Button 4 -->
<div class="bg-white dark:bg-gray-800 border-4 border-black dark:border-white p-6 shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] transform transition-transform duration-200 hover:scale-105">
<div class="flex items-center space-x-4">
<div class="text-blue-500 text-3xl">
<i class="fab fa-linkedin-in"></i>
</div>
<div>
<h3 class="text-xl font-bold text-gray-900 dark:text-white">Share on LinkedIn</h3>
<p class="text-gray-600 dark:text-gray-400">Grow your network!</p>
</div>
</div>
<button class="mt-6 w-full bg-blue-500 text-black py-3 px-4 border-2 border-black dark:border-white font-bold text-lg transform translate-x-1 translate-y-1 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff] hover:translate-x-0 hover:translate-y-0 hover:shadow-none transition-all duration-200">
Connect
</button>
</div>
</div>
</div>Composants associés
Composant Boutons de partage social
Boutons de partage social réactifs avec le style Glassmorphism et des couleurs vives, conçus pour les blogs et la consommation de contenu.
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 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.