Componente Pulsanti di condivisione social
Un componente reattivo del pulsante di condivisione social per siti Web di cibo/ristoranti, con una sfumatura arcobaleno, microinterazioni al passaggio del mouse e supporto completo della modalità scura.
Codice HTML
<div class="flex items-center justify-center p-4 min-h-screen bg-gray-50 dark:bg-gray-900 font-sans">
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 max-w-sm w-full transition-all duration-300 ease-in-out transform hover:scale-105">
<h2 class="text-2xl font-extrabold text-center mb-6 text-transparent bg-clip-text bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 dark:from-red-400 dark:via-yellow-400 dark:to-green-400">
Share This Delicious Food!
</h2>
<div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6">
<!-- Facebook Button -->
<a href="#" class="share-button group relative flex items-center justify-center p-3 rounded-xl overflow-hidden shadow-md transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95
bg-gradient-to-r from-blue-600 to-blue-800 text-white
dark:from-blue-700 dark:to-blue-900">
<div class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 group-focus:opacity-10 transition-opacity duration-200"></div>
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M17 2H7a5 5 0 00-5 5v10a5 5 0 005 5h10a5 5 0 005-5V7a5 5 0 00-5-5zm-1.8 7.2h-2.1v-1.7c0-.5.2-.8.8-.8h1.3V6.2h-2.1c-2.4 0-3 1.8-3 3v2.2H8.9v2.8h1.6V20h3.2v-5.8h1.6l.3-2.8h-1.9v-2c0-.7.3-1.1 1.2-1.1z" />
</svg>
<span class="sr-only">Share on Facebook</span>
</a>
<!-- Twitter Button -->
<a href="#" class="share-button group relative flex items-center justify-center p-3 rounded-xl overflow-hidden shadow-md transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95
bg-gradient-to-r from-sky-400 to-cyan-600 text-white
dark:from-sky-500 dark:to-cyan-700">
<div class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 group-focus:opacity-10 transition-opacity duration-200"></div>
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M18.24 3.7 C17.38 4.6 15.65 5.56 12.87 5.7 C11.3 4 9.17 3 6.78 3 c-3.57 0-6.49 2.92-6.49 6.5 S3.21 16 6.78 16 c1.79 0 3.44-.68 4.7-1.85 l.3 2.15 h-3.23 C5.06 16.3 3.6 17.76 3.6 19.5 s1.46 3.2 3.2 3.2 H14.6 c1.74 0 3.2-1.46 3.2-3.2 0-1.74-1.46-3.2-3.2-3.2 H11.4 L11 11.5 h5.2 c.72 0 1.28-.56 1.28-1.28 V8.4 c0-.72-.56-1.28-1.28-1.28 h-5.8 l-.5-1.95 C12.28 4.4 13.9 3.5 15.9 3.5 c1.18 0 2.27.35 3.16.94 L18.24 3.7 M6.78 5.7 c.73 0 1.4.16 2 .46 -.6-.26-1.28-.4-1.98-.4 c-3.13 0-5.69 2.56-5.69 5.7 S3.65 17 6.78 17 c1.36 0 2.6-.48 3.56-1.25 L9.6 14.8 c-.8 0-1.5-.16-2.1-.46 C6.7 14 6.2 13.7 5.8 13.2 l-.35-.35 c-.46-.46-1.07-.7-1.72-.7 -1.25 0-2.28 1.03-2.28 2.28 s1.03 2.28 2.28 2.28 c.83 0 1.58-.45 1.95-1.12 C6.2 15.9 6.5 15.6 6.78 15.6 L6.78 5.7 z" />
</svg>
<span class="sr-only">Share on Twitter</span>
</a>
<!-- WhatsApp Button -->
<a href="#" class="share-button group relative flex items-center justify-center p-3 rounded-xl overflow-hidden shadow-md transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95
bg-gradient-to-r from-green-500 to-teal-500 text-white
dark:from-green-600 dark:to-teal-600">
<div class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 group-focus:opacity-10 transition-opacity duration-200"></div>
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12.04 2.2 C6.55 2.2 2.17 6.6 2.17 12.1 c0 1.7.45 3.3.13 4.1 L2 21.8 l5.1-.9 c.7.3 1.4.4 2.2.4 L12.04 22 c5.49 0 9.87-4.4 9.87-9.9 C21.91 6.6 17.53 2.2 12.04 2.2 M17 15.1 c-.2.1-.4.2-.6.2-.2 0-.4-.1-.5-.1-.2-.1-.5-.2-.7-.3-.2-.1-.4-.2-.5-.3-.2-.1-.4-.2-.5-.3-.2-.1-.4-.2-.5-.3-.2-.1-.4-.2-.5-.3-.2-.1-.4-.2-.5-.3s-.3-.2-.5-.3-.2-.1-.4-.2-.2-.1-.4-.2-.1-.1-.3-.2-.1-.1-.3-.1-.1-.1-.2-.1-.1-.1-.2-.1s-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1 0-.1 0-.1 0 0 0c-.1 0-.1 0 0 0-.1 0-.1 0 0 0h-.1s0-.1 0-.1c0-.1 0-.1 0-.1c-.1 0-.1 0-.1-.1s-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1c-.1-.1-.1-.1-.2-.1l-.1-.1c-.1-.1-.1-.1-.2-.1l-.1-.1c-.1 0-.1-.1-.2-.1s-.1-.1-.1-.1c-.1 0-.1 0-.1-.1l-.1-.1c-.1 0-.1 0-.1-.1l-.1-.1c-.1 0-.1 0-.1-.1l-.1-.1c-.1 0-.1 0-.1-.1l-.1-.1c-.1-.1-.1-.1-.2-.1l-.1-.1c-.1 0-.1 0-.1-.1l-.1 0c-.1 0-.1 0-.1 0l-.1 0c-.1 0-.1 0-.1 0l-.1 0c-.1 0-.1 0-.1 0l-.1-.1c-.1 0-.1 0-.1 0l-.1-.1c-.1 0-.1 0-.1-.1l-.1-.1c-.1 0-.1 0-.1-.1l-.1 0c-.1 0-.1 0-.1-.1l-.1-.1C4.4 17.5 4 15.8 4 14.1c0-2.8.9-5.1 2.3-6.9 1.4-1.8 3.3-2.8 5.4-2.8S15.1 5.4 16.5 7.2c1.4 1.8 2.3 4.1 2.3 6.9 0 2.8-.9 5.1-2.3 6.9-1.4 1.8-3.3 2.8-5.4 2.8-2.1 0-4.1-.9-5.4-2.8l-.1-.1-.1-.1-.2-.1-.2-.1-.2-.1-.2-.1-.2-.1.2-.2.2-.2c-.2-.1-.4-.2-.5-.3-.2-.1-.4-.2-.5-.3-.2-.1-.4-.2-.5-.3-.2-.1-.4-.2-.5-.3-.2-.1-.4-.2-.5-.3-.2-.1-.4-.2-.5-.3-.2-.1-.4-.2-.5-.3-.2-.1-.4-.2-.5-.3-.2-.1-.4-.2-.5-.3-.2-.1-.4-.2-.5-.3s-.3-.2-.5-.3-.2-.1-.4-.2-.2-.1-.4-.2-.2-.1-.4-.2-.1-.1-.3-.1-.1-.1-.3-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1s-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1 0-.1 0-.1 0-.1-.1c-.1 0-.1 0-.1-.1-.1 0-.1 0-.1 0-.1 0-.1-.1-.2-.1-.1 0-.1 0-.1 0-.1 0-.1 0-.1-.1-.1 0-.1 0-.1 0-.1 0-.1 0-.1-.1-.1 0-.1 0-.1 0-.1 0-.1 0-.1 0-.1 0-.1 0-.1 0-.1 0-.1 0V11.2c0-.5.2-.8.5-.8h.1c.3.1.5.3.6.5.1.2.2.3.4.5.1.2.3.4.4.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5h.1c-.2-.1-.5-.2-.7-.3-.2-.1-.5-.2-.7-.3-.2-.1-.5-.2-.7-.3-.2-.1-.5-.2-.7-.3l-3.2-1.9c-.3-.2-.5-.3-.7-.4-.3-.1-.5-.2-.8-.3-.2-.1-.5-.2-.7-.3l-1.3-.8c-.1-.1-.3-.2-.4-.2-.2-.1-.4-.1-.6-.2-.2-.1-.4-.2-.6-.2-.2 0-.3-.1-.5-.1-.2-.1-.4-.1-.6-.1-.2 0-.4 0-.5-.1-.2-.1-.3-.1-.5-.1-.2 0-.4 0-.5-.1-.2-.1-.3-.1-.5-.1-.2 0-.4-.1-.5-.1C7.1 11 6.9 11 6.8 11.2c-.1.2-.1.4-.1.6s.1.4.2.6l1.3 2.2c.2.3.4.6.6.9.2.3.4.5.6.8.2.3.4.6.6.9.2.3.4.6.6.9.2.3.4.6.6.9.2.3.4.6.6.9.2.3.4.6.6.9.2.3.4.6.6.9.2.3.4.6.6.9.2.3.4.6.6.9.2.3.4.6.6.9.2.2.3.5.5.7.1.3.3.5.4.8.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.2.3.5.5.7.1.3.3.5.4.8.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9q.2-.3.4-.6c.2-.3.3-.6.5-.9.2-.3.3-.6.5-.9.2-.3.3-.6.5-.9.2-.3.3-.6.5-.9.2-.3.3-.6.5-.9.2-.3.3-.6.5-.9.2-.3.3-.6.5-.9.2-.3.3-.6.5-.9.2-.3.3-.6.5-.9.2-.3.3-.6.5-.9.2-.3.3-.6.5-.9.2-.3.3-.6.5-.9v-.1c.1-.1.2-.3.3-.4l-.2-.3c.1-.1.2-.2.3-.3.1-.1.3-.2.4-.2.1-.1.3-.2.4-.3.1-.1.3-.2.4-.3.1-.1.3-.2.4-.3.1-.1.3-.2.4-.3.1-.1.2-.2.3-.3.1-.1.3-.2.4-.3.1-.1.2-.2.3-.3.1-.1.3-.2.4-.3.1-.1.2-.2.3-.3.1-.1.3-.2.4-.3.1-.1.2-.2.3-.3.1-.1.3-.2.4-.3.1-.1.2-.2.3-.3.1-.1.3-.2.4-.3.1-.1.2-.2.3-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3s.3-.2.5-.3a5.5 a5.5 0 00-.7-.4c-.2-.1-.4-.2-.5-.3z" />
</svg>
<span class="sr-only">Share on WhatsApp</span>
</a>
<!-- Email Button -->
<a href="#" class="share-button group relative flex items-center justify-center p-3 rounded-xl overflow-hidden shadow-md transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95
bg-gradient-to-r from-orange-400 to-red-500 text-white
dark:from-orange-500 dark:to-red-600">
<div class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 group-focus:opacity-10 transition-opacity duration-200"></div>
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M2.01 4.2 C1 4.8 1 5 1 5 c0 .6.2 1.2.6 1.6 l7.8 7.8 C10.1 16.5 11.2 17 12.5 17 s2.4-.5 3.5-.6 l.1-1.1 -.1-.1 c-.1-.1-.2-.2-.2-.2 C15.4 15.3 14 14.2 13 13 L6.7 6.7 c-.5-.5-.8-.7-1.3-.8 C4.9 5.8 4.6 5.8 4.2 5.8 c-.4 0-.8.1-1.2.2 C2.5 6 2.3 6.1 2.1 6.1 L2.1 4.2 M21.9 4.2 C20.9 4.8 20.9 5 20.9 5 c0 .6-.2 1.2-.6 1.6 l-7.8 7.8 C13.8 16.5 12.8 17 11.5 17 s-2.4-.5-3.5-.6 l-.1-1.1 .1-.1 c.1-.1.2-.2.2-.2 C8.5 15.3 10 14.2 11 13 l6.3-6.3 c.5-.5.8-.7 1.3-.8 C19.1 5.8 19.4 5.8 19.8 5.8 c.4 0 .8.1 1.2.2 C21.4 6 21.6 6.1 21.8 6.1 L21.9 4.2 M2.01 4.2 C1 4.8 1 5 1 5 c0 .6.2 1.2.6 1.6 l7.8 7.8 C10.1 16.5 11.2 17 12.5 17 s2.4-.5 3.5-.6 l.1-1.1 -.1-.1 c-.1-.1-.2-.2-.2-.2 C15.4 15.3 14 14.2 13 13 L6.7 6.7 c-.5-.5-.8-.7-1.3-.8 C4.9 5.8 4.6 5.8 4.2 5.8 c-.4 0-.8.1-1.2.2 L2.1 6.1 L2.1 4.2 M21.9 4.2 C20.9 4.8 20.9 5 20.9 5 c0 .6-.2 1.2-.6 1.6 l-7.8 7.8 C13.8 16.5 12.8 17 11.5 17 s-2.4-.5-3.5-.6 l-.1-1.1 .1-.1 c.1-.1.2-.2.2-.2 C8.5 15.3 10 14.2 11 13 l6.3-6.3 c.5-.5.8-.7 1.3-.8 C19.1 5.8 19.4 5.8 19.8 5.8 c.4 0 .8.1 1.2.2 C21.4 6 21.6 6.1 21.8 6.1 L21.9 4.2" />
</svg>
<span class="sr-only">Share via Email</span>
</a>
<!-- Pinterest Button -->
<a href="#" class="share-button group relative flex items-center justify-center p-3 rounded-xl overflow-hidden shadow-md transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95
bg-gradient-to-r from-red-600 to-red-800 text-white
dark:from-red-700 dark:to-red-900">
<div class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 group-focus:opacity-10 transition-opacity duration-200"></div>
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12.01 2.2 C6.53 2.2 2.15 6.6 2.15 12.1 c0 1.7.45 3.3.13 4.1 L2 21.8 l5.1-.9 c.7.3 1.4.4 2.2.4 L12.01 22 c5.48 0 9.87-4.4 9.87-9.9 C21.88 6.6 17.5 2.2 12.01 2.2 M17.7 10.4 c-.4 1.7-.5 2.5-.9 3.8-1.1 3.5-3.5 5.5-6.6 5.5-2.2 0-3.6-1.1-4.2-2.1-.8-1.3-.9-2.5-.9-3.8 0-1.2.2-2.3.6-3.4 1-2.9 3.5-5 6.7-5 2.5 0 4.1.8 4.7 1.9.7 1.1.9 2.5.4 4.1zm-4.7-2.7c-1.2 0-2.2.4-2.8 1.1-.6.7-.8 1.6-.8 2.5s.2 1.8.8 2.5c.6.7 1.6 1.1 2.8 1.1 1.2 0 2.2-.4 2.8-1.1.6-.7.8-1.6.8-2.5s-.2-1.8-.8-2.5c-.6-.7-1.6-1.1-2.8-1.1z" />
</svg>
<span class="sr-only">Share on Pinterest</span>
</a>
<!-- Link Copy Button -->
<button type="button" aria-label="Copy link" class="share-button group relative flex items-center justify-center p-3 rounded-xl overflow-hidden shadow-md transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95
bg-gradient-to-r from-purple-500 to-indigo-600 text-white
dark:from-purple-600 dark:to-indigo-700">
<div class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 group-focus:opacity-10 transition-opacity duration-200"></div>
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 4 C8.68 4 6 6.68 6 10 s2.68 6 6 6 c.5 0 .9-.4 1-.9.1-.5-.2-1-.7-1.1-.3-.1-.5-.1-.7-.1-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4c0 1.1-.5 2.1-1.3 2.8-.4.4-.4 1-.1 1.4.3.4.9.5 1.3.2 1.1-1 1.8-2.5 1.8-4.4 C18 6.68 15.32 4 12 4 M12 20 c-3.32 0-6-2.68-6-6 s2.68-6 6-6 c.5 0 .9.4 1 .9.1.5-.2 1-.7 1.1-.3.1-.5.1-.7.1-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4c0-1.1-.5-2.1-1.3-2.8-.4-.4-.4-1-.1-1.4.3-.4.9-.5 1.3-.2 1.1 1 1.8 2.5 1.8 4.4 C18 17.32 15.32 20 12 20 z" />
</svg>
<span class="sr-only">Copy link</span>
</button>
</div>
</div>
</div>Componenti correlati
Componente Pulsanti di condivisione social
Un componente dei pulsanti di condivisione social in stile neumorfismo progettato per siti Web aziendali/aziendali, che utilizza i toni della terra e supporta un tema scuro.
Componente Pulsanti di condivisione social
Componente pulsanti di condivisione social per l'interfaccia utente in modalità scura, utilizza Tailwind CSS, combinazione di colori in scala di grigi, complessità semplice, per scopi di portfolio, design reattivo con supporto per tema scuro.
Componente Pulsanti di condivisione social
Un componente semplice e reattivo per i pulsanti di condivisione social con un'estetica ispirata al design Memphis che utilizza colori neutri freddi, adatto per strumenti CRM/aziendali. Include il supporto per la modalità oscura.