Componente Botones
Un componente de botones diseñado con elementos 3D y colores vibrantes para interfaces de redes sociales, compatible con temas oscuros y diseño receptivo.
Código HTML
<div class="flex flex-col items-center justify-center h-screen bg-gray-100 dark:bg-gray-900 p-4">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Connect with Us!</h2>
<div class="flex space-x-4">
<a href="#" class="flex items-center justify-center px-4 py-2 bg-blue-500 dark:bg-blue-700 text-white rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 active:scale-95">
<img src="https://picsum.photos/20?random=1" alt="Button Icon" class="mr-2 w-5 h-5 rounded-full">
Follow
</a>
<a href="#" class="flex items-center justify-center px-4 py-2 bg-green-500 dark:bg-green-700 text-white rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 active:scale-95">
<img src="https://picsum.photos/20?random=2" alt="Button Icon" class="mr-2 w-5 h-5 rounded-full">
Share
</a>
<a href="#" class="flex items-center justify-center px-4 py-2 bg-red-500 dark:bg-red-700 text-white rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 active:scale-95">
<img src="https://picsum.photos/20?random=3" alt="Button Icon" class="mr-2 w-5 h-5 rounded-full">
Like
</a>
</div>
</div>Componentes relacionados
Botones de redes sociales de neumorfismo
Un componente de botón simple al estilo Neumorphism para interfaces de redes sociales, con diseño receptivo y soporte de modo oscuro usando Tailwind CSS. El botón utiliza un esquema de color análogo y sombras sutiles para crear un aspecto suave y extruido.
Componente Botones
Un componente de botones de diseño minimalista / plano con un esquema de color en escala de grises. Es adecuado para sitios web comerciales / corporativos y tiene una complejidad moderada con algunas características interactivas. Es responsivo y admite el tema oscuro usando Tailwind CSS.
Componente Botones
Un componente de botón de temática retro-vintage con combinación de colores triádica, complejidad simple y diseño receptivo con soporte para modo oscuro, adecuado para un blog o sitio web de contenido.