Composant Boutons
Un composant de boutons réactifs avec prise en charge du mode sombre pour les portfolios. Dispose d’un design plat minimaliste en niveaux de gris avec une complexité modérée.
HTML Code
<div class="flex flex-col items-center justify-center gap-4 p-8 bg-gray-100 dark:bg-gray-900 min-h-screen">
<!-- Primary Button -->
<button class="px-6 py-3 text-lg font-semibold text-white bg-gray-800 rounded-md shadow-md transition duration-300 ease-in-out hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50 dark:bg-gray-200 dark:text-gray-900 dark:hover:bg-gray-300 dark:focus:ring-gray-400">
Primary Action
</button>
<!-- Secondary Button -->
<button class="px-6 py-3 text-lg font-semibold text-gray-800 bg-transparent border-2 border-gray-800 rounded-md shadow-md transition duration-300 ease-in-out hover:bg-gray-800 hover:text-white focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50 dark:text-gray-200 dark:border-gray-200 dark:hover:bg-gray-200 dark:hover:text-gray-900 dark:focus:ring-gray-400">
Secondary Action
</button>
<!-- Tertiary Button (Icon only example) -->
<button class="flex items-center justify-center w-12 h-12 text-gray-800 bg-transparent border-2 border-gray-800 rounded-full shadow-md transition duration-300 ease-in-out hover:bg-gray-800 hover:text-white focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50 dark:text-gray-200 dark:border-gray-200 dark:hover:bg-gray-200 dark:hover:text-gray-900 dark:focus:ring-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
</svg>
</button>
<!-- Responsive Example (adjusts layout on larger screens) -->
<div class="flex flex-col md:flex-row items-center justify-center gap-4 w-full">
<button class="w-full md:w-auto px-6 py-3 text-lg font-semibold text-white bg-gray-800 rounded-md shadow-md transition duration-300 ease-in-out hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50 dark:bg-gray-200 dark:text-gray-900 dark:hover:bg-gray-300 dark:focus:ring-gray-400">
Responsive Button 1
</button>
<button class="w-full md:w-auto px-6 py-3 text-lg font-semibold text-gray-800 bg-transparent border-2 border-gray-800 rounded-md shadow-md transition duration-300 ease-in-out hover:bg-gray-800 hover:text-white focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50 dark:text-gray-200 dark:border-gray-200 dark:hover:bg-gray-200 dark:hover:text-gray-900 dark:focus:ring-gray-400">
Responsive Button 2
</button>
</div>
</div>Composants associés
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.
Composant Boutons de conception matérielle
Composant de boutons de conception matérielle dans les tons de terre pour les médias sociaux
Composant Boutons
Un composant de boutons au design minimaliste / plat avec une palette de couleurs en niveaux de gris. Il convient aux sites Web d’entreprise et a une complexité modérée avec certaines fonctionnalités interactives. Il est réactif et prend en charge le thème sombre en utilisant Tailwind CSS.