Componenti
Pulsanti di condivisione social
Pulsanti di condivisione social del tono della terra scheumorfo
Pulsanti di condivisione social del tono della terra scheumorfo
Una serie di pulsanti di condivisione social con un design Skeuomorphic che utilizza i toni della terra. Le caratteristiche includono il layout reattivo e il supporto della modalità oscura con effetti di stampa interattivi al passaggio del mouse, costruiti esclusivamente con le classi HTML e Tailwind CSS.
Codice HTML
<div class="flex justify-center p-6 bg-stone-100 dark:bg-stone-900 min-h-screen">
<div class="flex space-x-4 md:space-x-6 flex-wrap justify-center w-full max-w-lg gap-y-4">
<!-- Facebook Button -->
<a href="#" class="w-16 h-16 p-4 rounded-xl flex items-center justify-center
bg-neutral-200 text-stone-700
shadow-[4px_4px_8px_#a3a3a3] shadow-[-4px_-4px_8px_#f5f5f5]
dark:bg-neutral-800 dark:text-stone-300
dark:shadow-[4px_4px_8px_#404040] dark:shadow-[-4px_-4px_8px_#737373]
transition transform duration-200 ease-in-out
hover:shadow-[inset_2px_2px_5px_#a3a3a3,_inset_-2px_-2px_5px_#f5f5f5] hover:scale-95
dark:hover:shadow-[inset_2px_2px_5px_#404040,_inset_-2px_-2px_5px_#737373]"
aria-label="Share on Facebook">
<svg class="w-full h-full" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M22.675 0H1.325C0.593 0 0 .593 0 1.325v21.351C0 23.407.593 24 1.325 24H12.82v-9.294H9.691v-3.621h3.129V8.41c0-3.11 1.893-4.82 4.66-4.82 1.314 0 2.417.097 2.745.141v3.208h-1.949c-1.534 0-1.841.724-1.841 1.793v2.358h3.56L19.524 14.71h-3.154V24h6.294c0.732 0 1.325-.593 1.325-1.325V1.325C24 .593 23.407 0 22.675 0z"/></svg>
</a>
<!-- Twitter Button -->
<a href="#" class="w-16 h-16 p-4 rounded-xl flex items-center justify-center
bg-neutral-200 text-stone-700
shadow-[4px_4px_8px_#a3a3a3] shadow-[-4px_-4px_8px_#f5f5f5]
dark:bg-neutral-800 dark:text-stone-300
dark:shadow-[4px_4px_8px_#404040] dark:shadow-[-4px_-4px_8px_#737373]
transition transform duration-200 ease-in-out
hover:shadow-[inset_2px_2px_5px_#a3a3a3,_inset_-2px_-2px_5px_#f5f5f5] hover:scale-95
dark:hover:shadow-[inset_2px_2px_5px_#404040,_inset_-2px_-2px_5px_#737373]"
aria-label="Share on Twitter">
<svg class="w-full h-full" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.716 11.492H16.35l-5.21-6.893L6.66 21.75H3.34l8.495-9.52-8.046-9.488h7.56zm-.493 1.374L5.207 21.02h3.75l9.138-12.874h-7.81z"/></svg>
</a>
<!-- Instagram Button -->
<a href="#" class="w-16 h-16 p-4 rounded-xl flex items-center justify-center
bg-neutral-200 text-stone-700
shadow-[4px_4px_8px_#a3a3a3] shadow-[-4px_-4px_8px_#f5f5f5]
dark:bg-neutral-800 dark:text-stone-300
dark:shadow-[4px_4px_8px_#404040] dark:shadow-[-4px_-4px_8px_#737373]
transition transform duration-200 ease-in-out
hover:shadow-[inset_2px_2px_5px_#a3a3a3,_inset_-2px_-2px_5px_#f5f5f5] hover:scale-95
dark:hover:shadow-[inset_2px_2px_5px_#404040,_inset_-2px_-2px_5px_#737373]"
aria-label="Share on Instagram">
<svg class="w-full h-full" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 0C8.74 0 8.333.014 7.053.072 5.775.132 4.9.333 4.073.668c-.844.331-1.592.726-2.34 1.473S.998 3.228.668 4.073c-.333.836-.534 1.701-.592 2.98-.058 1.28-.072 1.69-.072 4.9s.014 3.62.072 4.9c.058 1.278.259 2.144.592 2.977.33.844.726 1.592 1.473 2.34s1.5.998 2.34 1.473c.835.331 1.7.534 2.978.592 1.28.058 1.689.072 4.9.072s3.62.014 4.9-.072c1.277-.058 2.144-.259 2.977-.592.844-.33 1.592-.726 2.34-1.473s.998-1.5 1.473-2.34c.331-.836.534-1.7.592-2.977.058-1.28.072-1.69.072-4.9s-.014-3.62-.072-4.9c-.058-1.278-.259-2.144-.592-2.977-.33-.844-.726-1.592-1.473-2.34S20.772.998 19.927.668c-.835-.333-1.7-.534-2.978-.592C16.38.014 15.97.001 12 0zm0 2.16c3.203 0 3.585.016 4.85.074 1.05.049 1.791.217 2.41.465.639.254 1.129.596 1.597 1.064s.81 1.007 1.063 1.645c.248.62.416 1.36.465 2.41.058 1.264.074 1.646.074 4.85s-.016 3.585-.074 4.85c-.049 1.05-.217 1.791-.465 2.41-.254.639-.596 1.129-1.064 1.597s-1.007.81-1.645 1.063c-.62.248-1.36.416-2.41.465-1.264.058-1.646.074-4.85.074s-3.585-.016-4.85-.074c-1.05-.049-1.791-.217-2.41-.465-.639-.254-1.129-.596-1.597-1.064s-.81-1.007-1.063-1.645c-.248-.62-.416-1.36-.465-2.41C2.16 15.585 2.14 15.203 2.14 12s.016-3.585.074-4.85c.049-1.05.217-1.791.465-2.41.254-.639.596-1.129 1.064-1.597S3.29 3.361 3.929 3.106c.62-.248 1.36-.416 2.41-.465C8.414 2.16 8.796 2.14 12 2.14zm0 3.615a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9zm0 2.16a2.34 2.34 0 1 1 0 4.68 2.34 2.34 0 0 1 0-4.68z"/></svg>
</a>
<!-- LinkedIn Button -->
<a href="#" class="w-16 h-16 p-4 rounded-xl flex items-center justify-center
bg-neutral-200 text-stone-700
shadow-[4px_4px_8px_#a3a3a3] shadow-[-4px_-4px_8px_#f5f5f5]
dark:bg-neutral-800 dark:text-stone-300
dark:shadow-[4px_4px_8px_#404040] dark:shadow-[-4px_-4px_8px_#737373]
transition transform duration-200 ease-in-out
hover:shadow-[inset_2px_2px_5px_#a3a3a3,_inset_-2px_-2px_5px_#f5f5f5] hover:scale-95
dark:hover:shadow-[inset_2px_2px_5px_#404040,_inset_-2px_-2px_5px_#737373]"
aria-label="Share on LinkedIn">
<svg class="w-full h-full" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.04-.826-4.068c-.796-1.029-1.835-1.675-3.305-1.675c-2.137 0-3.205 1.578-3.205 4.125v5.187H6.88v-9.45h3.388v1.452h.046c.447-.863 1.607-1.77 3.29-1.77C17.357 8.116 18 9.769 18 12.15v8.302zM3.633 7.514c-1.002-.02-1.28.737-1.28 1.618c0 .88.282 1.617 1.28 1.637c.998.02 1.28-.737 1.28-1.617c0-.88-.282-1.618-1.28-1.638zm-.013-2.5c-1.328 0-2.158.891-2.158 2.035c0 1.143.83 2.035 2.148 2.035c1.328 0 2.157-.891 2.157-2.035c-.014-1.144-.83-2.035-2.147-2.035h.01zM6.88 20.452H3.633V11h3.25zm14.104 0h-3.554v-5.569c0-1.328-.027-3.04-.826-4.068c-.796-1.029-1.835-1.675-3.305-1.675c-2.137 0-3.205 1.578-3.205 4.125v5.187H6.88v-9.45h3.388v1.452h.046c.447-.863 1.607-1.77 3.29-1.77C17.357 8.116 18 9.769 18 12.15v8.302z"/></svg>
</a>
</div>
</div>Componenti correlati
Componente Pulsanti di condivisione social
Una serie di vivaci pulsanti di condivisione social ispirati al 3D adatti per siti Web di cibo e ristoranti, con reattività completa e supporto per la modalità scura.
Pulsanti di condivisione social neumorfici - Tema lavoro/carriera
Una serie di pulsanti di condivisione social progettati con uno stile neumorfico morbido e allegri colori caramella, adatti per bacheche di lavoro o piattaforme di carriera. Presenta un design reattivo e supporto per la modalità oscura.
Componente Pulsanti di condivisione social
Una serie di pulsanti di condivisione sui social media progettati con un'estetica monospace/sviluppatore, combinazione di colori blu aziendale e piena reattività. Include il supporto per la modalità oscura.