Componente de botones para compartir en redes sociales
Un componente de botón de compartir en redes sociales en escala de grises 3D simple y receptivo para paneles con soporte para modo oscuro.
Código HTML
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4 p-4">
<!-- Facebook -->
<a href="#" class="relative flex items-center justify-center p-4 bg-gray-300 dark:bg-gray-700 rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 group">
<div class="absolute inset-0 bg-gray-400 dark:bg-gray-600 rounded-lg transform translate-x-1 translate-y-1 group-hover:translate-x-0 group-hover:translate-y-0 transition-transform duration-300"></div>
<div class="relative text-gray-800 dark:text-gray-200 font-bold text-2xl z-10">F</div>
</a>
<!-- Twitter -->
<a href="#" class="relative flex items-center justify-center p-4 bg-gray-300 dark:bg-gray-700 rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 group">
<div class="absolute inset-0 bg-gray-400 dark:bg-gray-600 rounded-lg transform translate-x-1 translate-y-1 group-hover:translate-x-0 group-hover:translate-y-0 transition-transform duration-300"></div>
<div class="relative text-gray-800 dark:text-gray-200 font-bold text-2xl z-10">T</div>
</a>
<!-- LinkedIn -->
<a href="#" class="relative flex items-center justify-center p-4 bg-gray-300 dark:bg-gray-700 rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 group">
<div class="absolute inset-0 bg-gray-400 dark:bg-gray-600 rounded-lg transform translate-x-1 translate-y-1 group-hover:translate-x-0 group-hover:translate-y-0 transition-transform duration-300"></div>
<div class="relative text-gray-800 dark:text-gray-200 font-bold text-2xl z-10">in</div>
</a>
<!-- Instagram -->
<a href="#" class="relative flex items-center justify-center p-4 bg-gray-300 dark:bg-gray-700 rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 group">
<div class="absolute inset-0 bg-gray-400 dark:bg-gray-600 rounded-lg transform translate-x-1 translate-y-1 group-hover:translate-x-0 group-hover:translate-y-0 transition-transform duration-300"></div>
<div class="relative text-gray-800 dark:text-gray-200 font-bold text-2xl z-10">I</div>
</a>
</div>
</div>Componentes relacionados
Botones retro para compartir en redes sociales
Componente de botones para compartir en redes sociales con diseño retro / vintage, efectos responsivos y soporte de temas oscuros con Tailwind CSS, no se necesita JavaScript.
Componente de botones para compartir en redes sociales
Un componente de botones para compartir en redes sociales elegante y receptivo diseñado para sitios web de noticias y periodismo, con una lujosa paleta de colores bosque/verde y soporte para modo oscuro. Incluye múltiples elementos interactivos para compartir artículos en varias plataformas.
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.