Componenti Pulsanti di condivisione social Pulsanti di condivisione social

Pulsanti di condivisione social

Pulsanti di condivisione social con stile neumorfismo, combinazione di colori monocromatica e complessità semplice per siti Web aziendali/aziendali. Design reattivo con supporto per temi scuri utilizzando Tailwind CSS. Utilizza ombre sottili per l'effetto neumorfico.

Anteprima

Codice HTML

<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>

Componenti correlati

Pulsanti di condivisione social retrò

Componente Social Share Buttons con design retrò/vintage, effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS, senza bisogno di JavaScript.

Aperto

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.

Aperto

Componente Pulsanti di condivisione social

Componente Social Share Buttons con stile Brutalism, effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.

Aperto