Composant Boutons
Un composant de boutons simple stylisé avec Material Design, utilisant une palette de couleurs monochromatiques et prenant en charge le mode sombre, adapté aux sites Web d’entreprise.
HTML Code
<div class="flex flex-col items-center space-y-4 p-6 bg-gray-100 dark:bg-gray-800">
<h2 class="text-lg font-bold text-gray-800 dark:text-gray-200">Buttons Component</h2>
<div class="flex space-x-4">
<button class="px-6 py-2 rounded bg-blue-600 text-white hover:bg-blue-500 dark:bg-blue-800 dark:hover:bg-blue-700">Primary Button</button>
<button class="px-6 py-2 rounded border border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white dark:border-blue-800 dark:text-blue-200 dark:hover:bg-blue-800 dark:hover:text-white">Secondary Button</button>
</div>
<div class="flex space-x-4">
<button class="px-6 py-2 rounded bg-gray-300 text-gray-800 hover:bg-gray-400 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600">Tertiary Button</button>
<button class="px-6 py-2 rounded bg-transparent border border-gray-300 text-gray-800 hover:bg-gray-300 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-700">Outlined Button</button>
</div>
<div class="flex space-x-4">
<button class="px-6 py-2 rounded bg-blue-600 text-white hover:bg-blue-500 dark:bg-blue-800 dark:hover:bg-blue-700">Large Button</button>
<button class="px-4 py-2 rounded bg-blue-600 text-white hover:bg-blue-500 dark:bg-blue-800 dark:hover:bg-blue-700">Medium Button</button>
<button class="px-2 py-1 rounded bg-blue-600 text-white hover:bg-blue-500 dark:bg-blue-800 dark:hover:bg-blue-700">Small Button</button>
</div>
</div>Composants associés
Composant Boutons de neumorphisme
Un composant de bouton complexe de style Neumorphism avec des couleurs vives, un design réactif et une prise en charge du mode sombre, adapté aux sites Web d’entreprise.
Composant Boutons neumorphes
Un composant de bouton doté d’un style de conception neumorphe avec des effets réactifs et la prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant Glassmorphism Buttons
Un composant de bouton Glassmorphism simple et réactif avec des couleurs pastel et la prise en charge du mode sombre à l’aide de Tailwind CSS.