Skeuomorphic Boutons de partage social
Composant de boutons de partage social réactif avec un design skeuomorphe, une palette de couleurs monochromatique et des interactions complexes, avec prise en charge du thème sombre. Conçu pour les blogs et les sites de contenu.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<div class="flex space-x-4">
<!-- Facebook Button -->
<a href="#" class="block bg-gray-300 dark:bg-gray-700 p-4 rounded-xl shadow-xl hover:shadow-2xl transform hover:-translate-y-1 transition-all duration-300">
<div class="flex items-center justify-center w-12 h-12 bg-blue-600 dark:bg-blue-800 text-white rounded-full shadow-lg">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.299c-1.213 0-1.587.753-1.587 1.517V12h3.328l-.53 3.663h-2.798V22c4.781-.75 8.437-4.887 8.437-9.878z" />
</svg>
</div>
</a>
<!-- Twitter Button -->
<a href="#" class="block bg-gray-300 dark:bg-gray-700 p-4 rounded-xl shadow-xl hover:shadow-2xl transform hover:-translate-y-1 transition-all duration-300">
<div class="flex items-center justify-center w-12 h-12 bg-blue-400 dark:bg-blue-600 text-white rounded-full shadow-lg">
<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-.004-.357-.012-.534A8.358 8.358 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 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.477A4.073 4.073 0 014 10.20c0 .038 0 .077.01.116A11.703 11.703 0 0012.31 21.5a4.141 4.141 0 01-1.854-.054 4.002 4.002 0 01-1.495-.385 4.017 4.017 0 002.965-1.636c-.379-.09-.73-.28-1.014-.542-.283-.263-.51-.59-.656-.954a4.102 4.102 0 01-.166-1.095v-.049c.39.22.84.38 1.301.407a4.011 4.011 0 01-1.791-3.5z" />
</svg>
</div>
</a>
<!-- LinkedIn Button -->
<a href="#" class="block bg-gray-300 dark:bg-gray-700 p-4 rounded-xl shadow-xl hover:shadow-2xl transform hover:-translate-y-1 transition-all duration-300">
<div class="flex items-center justify-center w-12 h-12 bg-blue-700 dark:bg-blue-900 text-white rounded-full shadow-lg">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.583-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" clip-rule="evenodd" />
</svg>
</div>
</a>
<!-- Pinterest Button -->
<a href="#" class="block bg-gray-300 dark:bg-gray-700 p-4 rounded-xl shadow-xl hover:shadow-2xl transform hover:-translate-y-1 transition-all duration-300">
<div class="flex items-center justify-center w-12 h-12 bg-red-600 dark:bg-red-800 text-white rounded-full shadow-lg">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 0C6.477 0 2 4.477 2 10a8.015 8.015 0 002.161 5.411c-.066.241-.19.763-.217.862-.046.168-.113.471-.127.524-.014.052-.024.08-.024.08l-.001.003a1.04 1.04 0 01-.188.505 1 1 0 00.951 1.349l2.436-.002c.321 0 .627-.148.824-.404.196-.256.392-.786.476-1.042.284-.86.776-2.3.776-2.3.208.36.519.687.89.927A7.947 7.947 0 0012 18a8 8 0 100-16zM8.5 13C7.67 13 7 12.33 7 11.5S7.67 10 8.5 10 10 10.67 10 11.5 9.33 13 8.5 13zm7-2c-.83 0-1.5-.67-1.5-1.5S14.67 8 15.5 8 17 8.67 17 9.5 16.33 11 15.5 11z"/>
</svg>
</div>
</a>
</div>
</div>Composants associés
Composant Boutons de partage social
Un composant simple et réactif de boutons de partage social avec une esthétique inspirée du design de Memphis utilisant des couleurs neutres et froides, adapté aux outils CRM/professionnels. Inclut la prise en charge du mode sombre.
Composant Boutons de partage social
Composant de boutons de partage social pour l’interface utilisateur en mode sombre, utilise Tailwind CSS, schéma de couleurs en niveaux de gris, complexité simple, à des fins de portefeuille, conception réactive avec prise en charge du thème sombre.
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.