Pulsanti di condivisione social
Pulsanti di condivisione social con design reattivo, supporto per temi scuri ed estetica 3D. Non è richiesto alcun JavaScript.
Codice HTML
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="flex space-x-4 p-6 bg-white rounded-lg shadow-xl dark:bg-gray-700">
<!-- Facebook Button -->
<a href="#" class="flex items-center justify-center w-12 h-12 rounded-full text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transform transition-transform perspective-1000 hover:rotateX-15 hover:-translateZ-10">
<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.79c0-2.508 1.493-3.896 3.776-3.896 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" />
</svg>
</a>
<!-- Twitter Button -->
<a href="#" class="flex items-center justify-center w-12 h-12 rounded-full text-white bg-blue-400 hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transform transition-transform perspective-1000 hover:rotateX-15 hover:-translateZ-10">
<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 0-.35-.012-.523A8.143 8.143 0 0022 5.92a8.11 8.11 0 01-2.357.646 4.114 4.114 0 001.816-2.274c-.82-.485-1.73-.84A4.081 4.081 0 0010.95 3.515 4.121 4.121 0 007.07 6.5c0 .255.03.503.08.746A11.62 11.62 0 012.817 4.71a4.103 4.103 0 001.27 5.475 4.073 4.073 0 01-1.852-.514c0 0 0 .055 0 .088a4.118 4.118 0 003.306 4.032 4.202 4.202 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
</svg>
</a>
<!-- LinkedIn Button -->
<a href="#" class="flex items-center justify-center w-12 h-12 rounded-full text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transform transition-transform perspective-1000 hover:rotateX-15 hover:-translateZ-10">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M19 3a2 2 0 00-2-2H7a2 2 0 00-2 2v18a2 2 0 002 2h10a2 2 0 002-2V3zM9 8a1 1 0 01-1-1 1 1 0 011-1h6a1 1 0 011 1 1 1 0 01-1 1H9zm6 4a1 1 0 01-1 1H9a1 1 0 01-1-1 1 1 0 011-1h6a1 1 0 011 1zm0 4a1 1 0 01-1 1H9a1 1 0 01-1-1 1 1 0 011-1h6a1 1 0 011 1z" clip-rule="evenodd" />
<path d="M12 18a3 3 0 100-6 3 3 0 000 6z" />
</svg>
</a>
</div>
</div>Componenti correlati
Componente Pulsanti di condivisione social
Componente Social Share Buttons con design brutale, combinazione di colori vivaci e livello di complessità complesso per l'e-commerce, con design reattivo e supporto per temi scuri utilizzando Tailwind CSS. Niente JavaScript.
Pulsanti di condivisione social skeuomorfi
Componente reattivo dei pulsanti di condivisione social con design scheumorfo, combinazione di colori monocromatica e interazioni complesse, con supporto per temi scuri. Progettato per blog e siti di contenuti.
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.