Componentes
Botones para compartir en redes sociales
Botones de compartir en redes sociales de tono tierra skeuomórfico
Botones de compartir en redes sociales de tono tierra skeuomórfico
Un conjunto de botones para compartir en redes sociales con un diseño skeuomórfico y tonos tierra. Las características incluyen diseño responsivo y soporte de modo oscuro con efectos de prensa interactivos al pasar el mouse, construido exclusivamente con clases HTML y Tailwind CSS.
Código 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>Componentes relacionados
Componente de botones para compartir en redes sociales
Un componente responsivo de botones para compartir en redes sociales diseñado con estilo skeuomórfico en escala de grises para el consumo de contenido del blog. Incluye soporte para modo oscuro.
Componente de botones para compartir en redes sociales
Un componente de botones para compartir en redes sociales con un diseño 3D que incorpora elementos tridimensionales para mayor profundidad y participación. Es compatible con temas oscuros con CSS.
Componente de botones para compartir en redes sociales
Un componente responsivo de botones para compartir en redes sociales diseñado en un estilo de cristal con un esquema de color monocromático para sitios de comercio electrónico. Cuenta con elementos translúcidos similares al vidrio esmerilado, incluye múltiples botones interactivos para compartir en las redes sociales y es compatible con el modo oscuro con Tailwind CSS.