Componente Pulsanti di condivisione social
Componente Social Share Buttons con stile Brutalism, effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.
Codice HTML
<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>Componenti correlati
Componente Pulsanti di condivisione social
Un componente di pulsanti di condivisione social retrò/vintage con una combinazione di colori monocromatica. Si tratta di un design complesso e reattivo con supporto per temi scuri, adatto per un portfolio. Utilizza Tailwind CSS senza JavaScript.
Pulsanti di condivisione social
Pulsanti di condivisione social con design reattivo, supporto per temi scuri ed estetica 3D. Non è richiesto alcun JavaScript.
Pulsanti di condivisione social skeuomorfi
Una serie di pulsanti di condivisione social con un design Skeuomorphic che utilizza Tailwind CSS. Presenta sfumature, ombre ed effetti hover/attivi per simulare i pulsanti fisici. Il componente è reattivo e include il supporto della modalità oscura tramite CSS. Contiene pulsanti per Facebook, Twitter, LinkedIn e un pulsante generico di copia del link.