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.
Código HTML
<div class="flex justify-center space-x-4 p-4">
<div class="flex flex-col items-center">
<img src="https://picsum.photos/40/40?random=1" alt="Avatar" class="mb-2 rounded-full shadow-lg">
<a href="#" class="transition transform inline-block bg-blue-500 text-white rounded-full p-3 shadow-lg hover:scale-110 hover:shadow-xl dark:bg-blue-700">
<i class="fab fa-facebook-f"></i>
</a>
<span class="text-gray-700 dark:text-gray-300">Share on Facebook</span>
</div>
<div class="flex flex-col items-center">
<img src="https://picsum.photos/40/40?random=2" alt="Avatar" class="mb-2 rounded-full shadow-lg">
<a href="#" class="transition transform inline-block bg-red-500 text-white rounded-full p-3 shadow-lg hover:scale-110 hover:shadow-xl dark:bg-red-700">
<i class="fab fa-twitter"></i>
</a>
<span class="text-gray-700 dark:text-gray-300">Share on Twitter</span>
</div>
<div class="flex flex-col items-center">
<img src="https://picsum.photos/40/40?random=3" alt="Avatar" class="mb-2 rounded-full shadow-lg">
<a href="#" class="transition transform inline-block bg-green-500 text-white rounded-full p-3 shadow-lg hover:scale-110 hover:shadow-xl dark:bg-green-700">
<i class="fab fa-linkedin-in"></i>
</a>
<span class="text-gray-700 dark:text-gray-300">Share on LinkedIn</span>
</div>
<div class="flex flex-col items-center">
<img src="https://picsum.photos/40/40?random=4" alt="Avatar" class="mb-2 rounded-full shadow-lg">
<a href="#" class="transition transform inline-block bg-purple-500 text-white rounded-full p-3 shadow-lg hover:scale-110 hover:shadow-xl dark:bg-purple-700">
<i class="fab fa-instagram"></i>
</a>
<span class="text-gray-700 dark:text-gray-300">Share on Instagram</span>
</div>
</div>
<style>
@media (prefers-color-scheme: dark) {
body {
background-color: #1a202c;
}
}
</style>
Componentes relacionados
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 de botón de compartir en redes sociales en escala de grises 3D simple y receptivo para paneles con soporte para modo oscuro.
Componente de botones para compartir en redes sociales
Componente de botones para compartir en redes sociales para comercio electrónico en modo oscuro usando Tailwind CSS. Simple, receptivo y en escala de grises.