Componente de botones para compartir en redes sociales
Un componente de botones para compartir en redes sociales de estilo Neumorphism diseñado para sitios web empresariales/corporativos, que utiliza tonos tierra y admite un tema oscuro.
Código HTML
<div class="flex justify-center items-center p-5 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg">
<a href="#" class="flex items-center justify-center w-12 h-12 rounded-full bg-white dark:bg-gray-900 shadow-neumorphism hover:shadow-neumorphism-hover transition-shadow duration-300">
<img src="https://picsum.photos/seed/facebook/40/40" alt="Facebook" class="w-full h-full rounded-full object-cover" />
</a>
<a href="#" class="flex items-center justify-center w-12 h-12 mx-4 rounded-full bg-white dark:bg-gray-900 shadow-neumorphism hover:shadow-neumorphism-hover transition-shadow duration-300">
<img src="https://picsum.photos/seed/twitter/40/40" alt="Twitter" class="w-full h-full rounded-full object-cover" />
</a>
<a href="#" class="flex items-center justify-center w-12 h-12 rounded-full bg-white dark:bg-gray-900 shadow-neumorphism hover:shadow-neumorphism-hover transition-shadow duration-300">
<img src="https://picsum.photos/seed/linkedin/40/40" alt="LinkedIn" class="w-full h-full rounded-full object-cover" />
</a>
</div>
<style>
.shadow-neumorphism {
box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.2), -8px -8px 20px rgba(255, 255, 255, 0.7);
}
.shadow-neumorphism-hover {
box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.3), -4px -4px 12px rgba(255, 255, 255, 0.5);
}
</style>Componentes relacionados
Componente de botones para compartir en redes sociales
Un componente receptivo de botones para compartir en redes sociales con un estilo de diseño esqueuomórfico que imita a sus contrapartes del mundo real, con soporte para temas oscuros.
Componente de botones para compartir en redes sociales
Componente de botones para compartir en redes sociales con microinteracciones, combinación de colores en escala de grises, complejidad moderada para interfaces de redes sociales, diseño receptivo con soporte para temas oscuros.
Componente de botones para compartir en redes sociales
Un componente responsivo de botones para compartir en redes sociales con estética retro/vintage de los años 80/90, con soporte para temas oscuros usando Tailwind CSS e imágenes de marcador de posición.