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
Componente de botones para compartir en redes sociales
Un componente de botones para compartir en redes sociales simple y receptivo con una estética inspirada en el diseño de Memphis que utiliza colores neutros fríos, adecuado para herramientas de CRM / negocios. Incluye soporte para modo oscuro.
Componente de botones para compartir en redes sociales
Componente de botones para compartir en redes sociales con diseño retro / vintage, combinación de colores en tonos tierra, nivel de complejidad simple y diseño receptivo con soporte para temas oscuros, para fines de redes sociales utilizando Tailwind CSS.
Componente de botones para compartir en redes sociales: música/audio
Un conjunto de botones para compartir en redes sociales diseñados para plataformas de música y audio, con una estética de Material Design con colores apagados y compatibles con el modo oscuro. Incluye botones para plataformas comunes de uso compartido como Facebook, Twitter y correo electrónico.