Composant Boutons
Un composant de bouton minimaliste pour les tableaux de bord, avec prise en charge du responsive design et du thème sombre.
HTML Code
<div class="flex space-x-4 p-4 bg-gray-100 dark:bg-gray-900">
<!-- Primary Button -->
<button class="px-4 py-2 rounded-md
bg-blue-500 text-white font-semibold
hover:bg-blue-600
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75
dark:bg-blue-700 dark:hover:bg-blue-600">
Primary Action
</button>
<!-- Secondary Button -->
<button class="px-4 py-2 rounded-md
bg-gray-300 text-gray-800 font-semibold
hover:bg-gray-400
focus:outline-none focus:ring-2 focus:ring-gray-300 focus:ring-opacity-75
dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600">
Secondary Action
</button>
<!-- Success Button -->
<button class="px-4 py-2 rounded-md
bg-green-500 text-white font-semibold
hover:bg-green-600
focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-75
dark:bg-green-700 dark:hover:bg-green-600">
Success
</button>
<!-- Danger Button -->
<button class="px-4 py-2 rounded-md
bg-red-500 text-white font-semibold
hover:bg-red-600
focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-75
dark:bg-red-700 dark:hover:bg-red-600">
Delete
</button>
<!-- Disabled Button -->
<button class="px-4 py-2 rounded-md
bg-gray-200 text-gray-500 font-semibold
cursor-not-allowed
dark:bg-gray-800 dark:text-gray-600"
disabled>
Disabled
</button>
</div>Composants associés
Composant Boutons
Composant de bouton simple et réactif avec un design en niveaux de gris inspiré du papier/de l’impression, adapté aux plates-formes éducatives, prenant en charge les modes clair et sombre.
Composant Glassmorphism Buttons
Boutons Glassmorphism utilisant des tons de terre pour un site Portfolio réactif avec mode sombre
Composant Boutons
Boutons de style Material Design avec une palette de couleurs en niveaux de gris à des fins de portfolio, avec un design réactif avec prise en charge du thème sombre.