Componente Botones
Un componente de botones de estilo retro/vintage que presenta efectos responsivos y soporte para temas oscuros, diseñado para evocar la nostalgia de la estética de los años 80 y 90.
Código HTML
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800 p-5">
<h1 class="text-4xl font-bold text-center text-gray-800 dark:text-gray-200 mb-4">Retro/Vintage Buttons</h1>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<button class="bg-pink-500 text-white font-bold py-2 px-4 rounded-full shadow-lg transform transition-transform duration-200 hover:scale-105 hover:bg-pink-400 dark:bg-pink-600 dark:hover:bg-pink-500">
Retro Pink Button
</button>
<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded-full shadow-lg transform transition-transform duration-200 hover:scale-105 hover:bg-blue-400 dark:bg-blue-600 dark:hover:bg-blue-500">
Vintage Blue Button
</button>
<button class="bg-green-500 text-white font-bold py-2 px-4 rounded-full shadow-lg transform transition-transform duration-200 hover:scale-105 hover:bg-green-400 dark:bg-green-600 dark:hover:bg-green-500">
Nostalgic Green Button
</button>
<button class="bg-purple-500 text-white font-bold py-2 px-4 rounded-full shadow-lg transform transition-transform duration-200 hover:scale-105 hover:bg-purple-400 dark:bg-purple-600 dark:hover:bg-purple-500">
Retro Purple Button
</button>
</div>
<div class="mt-8">
<img class="w-32 h-32 rounded-full border-4 border-gray-300 dark:border-gray-600 mb-4" src="https://picsum.photos/200/200" alt="Random Placeholder" />
<p class="text-center text-gray-600 dark:text-gray-300">Nostalgic Image</p>
</div>
<div class="mt-4">
<img class="w-16 h-16 rounded-full border-4 border-gray-300 dark:border-gray-600 mb-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Random User Avatar" />
<p class="text-center text-gray-600 dark:text-gray-300">User Avatar</p>
</div>
</div>Componentes relacionados
ArtDecoECommerceButtons
Un complejo conjunto de botones de comercio electrónico inspirados en el Art Deco con patrones geométricos y lujosos tonos Ocean/Blue, optimizados para la capacidad de respuesta y el modo oscuro.
Componente de botones de brutalismo
Un componente de botones con un diseño brutalista, con colores de alta saturación, diseño receptivo y soporte de modo oscuro, adecuado para sitios web comerciales y corporativos.
Skeuomorphic_Social_Buttons
Un complejo conjunto de botones skeuomórficos con una combinación de colores vibrantes, diseñados para interfaces de redes sociales. Incluye diseño responsivo y soporte para el modo oscuro, imitando botones del mundo real.