Componentes Botones para compartir en redes sociales Botones para compartir en redes sociales Componente 51

Botones para compartir en redes sociales Componente 51

Un componente receptivo de botones para compartir en redes sociales diseñado con principios de diseño skeuomórficos, con botones que imitan objetos del mundo real y soporte para temas oscuros. El componente se diseña con Tailwind CSS e incluye imágenes de marcador de posición de picsum.photos y avatares de randomuser.me.

Vista previa

Código HTML

<div class="flex justify-center items-center p-5 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg">
    <div class="flex space-x-4">
        <div class="flex flex-col items-center">
            <img src="https://picsum.photos/40/40" alt="Share on Facebook" class="rounded-full shadow-md mb-2">
            <a href="#" class="bg-blue-600 dark:bg-blue-800 text-white p-2 rounded-full shadow-lg transform hover:scale-105 transition duration-150 ease-in-out">
                Facebook
            </a>
        </div>
        <div class="flex flex-col items-center">
            <img src="https://picsum.photos/40/40" alt="Share on Twitter" class="rounded-full shadow-md mb-2">
            <a href="#" class="bg-blue-400 dark:bg-blue-600 text-white p-2 rounded-full shadow-lg transform hover:scale-105 transition duration-150 ease-in-out">
                Twitter
            </a>
        </div>
        <div class="flex flex-col items-center">
            <img src="https://picsum.photos/40/40" alt="Share on LinkedIn" class="rounded-full shadow-md mb-2">
            <a href="#" class="bg-blue-700 dark:bg-blue-900 text-white p-2 rounded-full shadow-lg transform hover:scale-105 transition duration-150 ease-in-out">
                LinkedIn
            </a>
        </div>
        <div class="flex flex-col items-center">
            <img src="https://picsum.photos/40/40" alt="Share on Instagram" class="rounded-full shadow-md mb-2">
            <a href="#" class="bg-pink-500 dark:bg-pink-700 text-white p-2 rounded-full shadow-lg transform hover:scale-105 transition duration-150 ease-in-out">
                Instagram
            </a>
        </div>
    </div>
</div>

Componentes relacionados

Botones para compartir en redes sociales

Botones para compartir en redes sociales con estilo de neumorfismo, combinación de colores monocromática y complejidad simple para sitios web comerciales/corporativos. Diseño responsivo con soporte para temas oscuros usando Tailwind CSS. Utiliza sombras sutiles para el efecto neumórfico.

Abrir

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.

Abrir

Botones skeuomórficos para compartir en redes sociales

Componente de botones para compartir en redes sociales receptivo con diseño esqueuomórfico, combinación de colores monocromática e interacciones complejas, con soporte para temas oscuros. Diseñado para blogs y sitios de contenido.

Abrir