Composant Boutons
Un composant de boutons de style rétro/vintage qui présente des effets réactifs et une prise en charge du thème sombre, conçu pour évoquer la nostalgie de l’esthétique des années 80 et 90.
HTML Code
<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>Composants associés
Composant Boutons de conception matérielle
Composant de boutons de conception matérielle dans les tons de terre pour les médias sociaux
3D_Healthcare_Buttons_Component
Un composant complexe de boutons inspiré de la 3D pour les applications de santé, doté d’un design monochrome en noir et blanc avec une couleur d’accentuation vive, une mise en page réactive et une prise en charge du mode sombre.
Composant Boutons
Composant de boutons réactifs avec conception matérielle, schéma de couleurs triadique et prise en charge du thème sombre.