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.
Codice HTML
<div class="bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center p-4">
<div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-lg max-w-sm w-full">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center">Share My Work</h2>
<div class="grid grid-cols-2 gap-4">
<a href="#" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-4 rounded flex items-center justify-center space-x-2 transition duration-300 ease-in-out transform hover:scale-105">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M8.29 20.251c.96.2 1.956.333 3.013.333 1.056 0 2.052-.133 3.013-.333L10.3 12.3l-2.01 7.951zM12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm3.324 14.542l.534-.148c.036.19.062.383.062.584 0 .34-.047.668-.135.978l-1.002-.277c-.015-.004-.03-.008-.045-.012l-.99-.272zM12 4.1c-1.637 0-3.155.679-4.22 1.768L12 10.369c.148.148.337.222.526.222.189 0 .378-.074.526-.222L16.22 5.868C15.155 4.779 13.637 4.1 12 4.1zm-4.708 7.33A5.726 5.726 0 016.1 12c0 1.02.19 2.007.545 2.923l1.107-.306c.002-.001.004-.002.006-.003L7.292 11.43zm9.416 0L15.24 16.714c.002.001.004.002.006.003L16.22 14.923C16.577 14.007 16.768 13.02 16.768 12c0-.38-.035-.747-.099-1.096l-.999.276c-.015.004-.03.008-.045.012z"/></svg>
<span>Twitter</span>
</a>
<a href="#" class="bg-blue-700 hover:bg-blue-800 text-white font-bold py-3 px-4 rounded flex items-center justify-center space-x-2 transition duration-300 ease-in-out transform hover:scale-105">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm5 10c0 .99-.607 1.83-1.472 2.15l-.008.003c.594-.962.88-2.03.88-3.15 0-2.316-1.528-4.28-3.92-4.86.04-.15.06-.3.06-.47 0-.74-.23-1.43-.63-2.02l-.004-.007C15.176 4.968 16.945 8.163 17 12zm-3.5 0c0 1.93-1.57 3.5-3.5 3.5S8.5 13.93 8.5 12 10.07 8.5 12 8.5s3.5 1.57 3.5 3.5zm-5.748-1.58C9.53 9.71 10.74 9 12 9s2.47.71 3.248 1.42c-.77-.42-1.68-.67-2.67-.67-.99 0-1.9.25-2.67.67zM12 20.1C8.28 20.1 5 16.82 5 12c0-1.76.67-3.41 1.79-4.66l-.007-.008C5.176 8.163 3 11.233 3 12c0 2.21 1.79 4 4 4v-1h-.5a1.5 1.5 0 00-1.5 1.5v2c0 .83.67 1.5 1.5 1.5h11c.83 0 1.5-.67 1.5-1.5v-2a1.5 1.5 0 00-1.5-1.5H17v-1c2.21 0 4-1.79 4-4s-1.79-4-4-4v1h.5a1.5 1.5 0 001.5-1.5v-2c0-.83-.67-1.5-1.5-1.5h-11c-.83 0-1.5.67-1.5 1.5v2zm4.708 1.42A5.726 5.726 0 0017.9 12c0-1.02-.19-2.007-.545-2.923l-1.107.306c-.002.001-.004.002-.006.003L16.708 11.43z"/></svg>
<span>Facebook</span>
</a>
<a href="#" class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-4 rounded flex items-center justify-center space-x-2 transition duration-300 ease-in-out transform hover:scale-105">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm4.5 13.5h-9V8.5h9v7zm-2-5H9.5v-2h5v2zm-2.5 5H9.5v-2h2.5v2zM12 4.1c-1.637 0-3.155.679-4.22 1.768L12 10.369c.148.148.337.222.526.222.189 0 .378-.074.526-.222L16.22 5.868C15.155 4.779 13.637 4.1 12 4.1zm-4.708 7.33A5.726 5.726 0 016.1 12c0 1.02.19 2.007.545 2.923l1.107-.306c-.002-.001-.004-.002-.006-.003L7.292 11.43zm9.416 0L15.24 16.714c.002.001.004.002.006.003L16.22 14.923C16.577 14.007 16.768 13.02 16.768 12c0-.38-.035-.747-.099-1.096l-.999.276c-.015.004-.03.008-.045.012z"/></svg>
<span>YouTube</span>
</a>
<a href="#" class="bg-pink-500 hover:bg-pink-600 text-white font-bold py-3 px-4 rounded flex items-center justify-center space-x-2 transition duration-300 ease-in-out transform hover:scale-105">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm3.324 14.542l.534-.148c.036.19.062.383.062.584 0 .34-.047.668-.135.978l-1.002-.277c-.015-.004-.03-.008-.045-.012l-.99-.272zM12 4.1c-1.637 0-3.155.679-4.22 1.768L12 10.369c.148.148.337.222.526.222.189 0 .378-.074.526-.222L16.22 5.868C15.155 4.779 13.637 4.1 12 4.1zm-4.708 7.33A5.726 5.726 0 016.1 12c0 1.02.19 2.007.545 2.923l1.107-.306c-.002-.001-.004-.002-.006-.003L7.292 11.43zm9.416 0L15.24 16.714c.002.001.004.002.006.003L16.22 14.923C16.577 14.007 16.768 13.02 16.768 12c0-.38-.035-.747-.099-1.096l-.999.276c-.015.004-.03.008-.045.012z"/></svg>
<span>Instagram</span>
</a>
<a href="#" class="bg-gray-700 hover:bg-gray-800 text-white font-bold py-3 px-4 rounded flex items-center justify-center space-x-2 transition duration-300 ease-in-out transform hover:scale-105">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm3.324 14.542l.534-.148c.036.19.062.383.062.584 0 .34-.047.668-.135.978l-1.002-.277c-.015-.004-.03-.008-.045-.012l-.99-.272zM12 4.1c-1.637 0-3.155.679-4.22 1.768L12 10.369c.148.148.337.222.526.222.189 0 .378-.074.526-.222L16.22 5.868C15.155 4.779 13.637 4.1 12 4.1zm-4.708 7.33A5.726 5.726 0 016.1 12c0 1.02.19 2.007.545 2.923l1.107-.306c-.002-.001-.004-.002-.006-.003L7.292 11.43zm9.416 0L15.24 16.714c.002.001.004.002.006.003L16.22 14.923C16.577 14.007 16.768 13.02 16.768 12c0-.38-.035-.747-.099-1.096l-.999.276c-.015.004-.03.008-.045.012z"/></svg>
<span>GitHub</span>
</a>
<a href="#" class="bg-blue-400 hover:bg-blue-500 text-white font-bold py-3 px-4 rounded flex items-center justify-center space-x-2 transition duration-300 ease-in-out transform hover:scale-105">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm3.324 14.542l.534-.148c.036.19.062.383.062.584 0 .34-.047.668-.135.978l-1.002-.277c-.015-.004-.03-.008-.045-.012l-.99-.272zM12 4.1c-1.637 0-3.155.679-4.22 1.768L12 10.369c.148.148.337.222.526.222.189 0 .378-.074.526-.222L16.22 5.868C15.155 4.779 13.637 4.1 12 4.1zm-4.708 7.33A5.726 5.726 0 016.1 12c0 1.02.19 2.007.545 2.923l1.107-.306c-.002-.001-.004-.002-.006-.003L7.292 11.43zm9.416 0L15.24 16.714c.002.001.004.002.006.003L16.22 14.923C16.577 14.007 16.768 13.02 16.768 12c0-.38-.035-.747-.099-1.096l-.999.276c-.015.004-.03.008-.045.012z"/></svg>
<span>LinkedIn</span>
</a>
</div>
</div>
</div>Componenti correlati
Componente Pulsanti di condivisione social
Un componente reattivo dei pulsanti di condivisione social progettato con uno stile scheumorfico in scala di grigi per il consumo di contenuti di blog. Include il supporto per la modalità oscura.
Brutalismo Social Share Pulsanti
Componente Social Share Buttons con stile Brutalism, effetti reattivi e supporto per temi scuri, non è necessario javascript
Componente Pulsanti di condivisione social
Un componente di condivisione social pulito e minimalista per le interfacce finanziarie/bancarie, caratterizzato da nero, bianco e un colore d'accento, con reattività completa e supporto per la modalità scura.