Boutons de partage social
Boutons de partage social avec style Neumorphisme, palette de couleurs monochromatique et complexité simple pour les sites Web d’entreprise. Conception réactive avec prise en charge du thème sombre à l’aide de Tailwind CSS. Utilise des ombres subtiles pour l’effet neumorphe.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800">
<div class="flex space-x-4 p-6 rounded-xl shadow-inner bg-gray-300 dark:bg-gray-700">
<!-- Facebook Button -->
<a href="#" class="w-12 h-12 flex items-center justify-center rounded-full shadow-lg bg-gray-300 dark:bg-gray-700 hover:shadow-xl transition duration-300">
<svg class="w-6 h-6 text-gray-600 dark:text-gray-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" 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.58.756-1.58 1.536V12h3.06l-.49 3.03h-2.572v7.019C18.368 21.083 22 16.951 22 12z" clip-rule="evenodd" />
</svg>
</a>
<!-- Twitter Button -->
<a href="#" class="w-12 h-12 flex items-center justify-center rounded-full shadow-lg bg-gray-300 dark:bg-gray-700 hover:shadow-xl transition duration-300">
<svg class="w-6 h-6 text-gray-600 dark:text-gray-300" 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.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.509 4.079 4.079 0 01-1.852-.514c0 .021 0 .042 0 .063a4.186 4.186 0 003.303 4.102 4.23 4.23 0 01-1.89.072 4.165 4.165 0 003.823 2.899 8.345 8.345 0 01-5.139 1.77c-.335 0-.668-.023-.996-.069a11.7 11.7 0 006.29 1.84" />
</svg>
</a>
<!-- LinkedIn Button -->
<a href="#" class="w-12 h-12 flex items-center justify-center rounded-full shadow-lg bg-gray-300 dark:bg-gray-700 hover:shadow-xl transition duration-300">
<svg class="w-6 h-6 text-gray-600 dark:text-gray-300" 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>
</a>
<!-- Email Button -->
<a href="#" class="w-12 h-12 flex items-center justify-center rounded-full shadow-lg bg-gray-300 dark:bg-gray-700 hover:shadow-xl transition duration-300">
<svg class="w-6 h-6 text-gray-600 dark:text-gray-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M.05 3.5c0-.82.68-1.5 1.5-1.5h21c.82 0 1.5.68 1.5 1.5v17c0 .82-.68 1.5-1.5 1.5h-21c-.82 0-1.5-.68-1.5-1.5V3.5zm1.5 1.5v.91l10.06 6.55L22.55 5.9V5h-21zm0 2.09l9.18 6.04.77.5c.15.1.37.1.52 0l.77-.5 9.18-6.04V19h-21V7.09z"/>
</svg>
</a>
</div>
</div>Composants associés
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
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.
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é.