Componente Pulsanti
Un componente pulsanti in stile retrò/vintage che presenta effetti reattivi e supporto per temi scuri, progettato per evocare la nostalgia dell'estetica degli anni '80 e '90.
Codice 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>Componenti correlati
Componente pulsanti neumorfici
Un componente pulsante caratterizzato da uno stile di design neumorfico con effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.
3D_Healthcare_Buttons_Component
Un complesso componente di pulsanti ispirato al 3D per applicazioni sanitarie, caratterizzato da un design monocromatico in bianco e nero con un colore d'accento brillante, un layout reattivo e il supporto della modalità scura.
Componente dei pulsanti immobiliari Art Deco
Un complesso componente pulsante ispirato all'Art Déco per piattaforme immobiliari, caratterizzato da motivi geometrici, lussuoso stile in scala di grigi e molteplici elementi interattivi, con piena reattività e supporto per la modalità oscura.