Composant Boutons
Un composant de boutons conçu dans le style Material Design avec une palette de couleurs pastel, réactif pour les sites Web d’entreprise/d’entreprise et prenant en charge les thèmes sombres.
HTML Code
<div class="flex flex-col space-y-4 p-4 max-w-md mx-auto">
<!-- Primary Button -->
<button class="bg-blue-400 hover:bg-blue-500 text-white font-semibold py-2 px-4 rounded shadow-md transition-transform transform hover:scale-105 dark:bg-blue-600 dark:hover:bg-blue-700">
Primary Button
</button>
<!-- Secondary Button -->
<button class="bg-green-400 hover:bg-green-500 text-white font-semibold py-2 px-4 rounded shadow-md transition-transform transform hover:scale-105 dark:bg-green-600 dark:hover:bg-green-700">
Secondary Button
</button>
<!-- Disabled Button -->
<button class="bg-gray-300 text-gray-500 font-semibold py-2 px-4 rounded shadow-md cursor-not-allowed transition-opacity opacity-70 dark:bg-gray-700 dark:text-gray-400">
Disabled Button
</button>
<!-- Outline Button -->
<button class="border-2 border-blue-400 text-blue-400 font-semibold py-2 px-4 rounded hover:bg-blue-400 hover:text-white transition-colors dark:border-blue-600 dark:text-blue-600 dark:hover:bg-blue-600 dark:hover:text-white">
Outline Button
</button>
<!-- Icon Button -->
<button class="flex items-center bg-yellow-400 hover:bg-yellow-500 text-white font-semibold py-2 px-4 rounded shadow-md transition-transform transform hover:scale-105 dark:bg-yellow-600 dark:hover:bg-yellow-700">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Icon" class="w-5 h-5 mr-2 rounded-full">
Icon Button
</button>
</div>Composants associés
Composant Boutons
Un ensemble de boutons interactifs conçus pour un portfolio, avec des micro-interactions, une palette de couleurs complémentaires et une réactivité totale avec prise en charge du mode sombre.
Composant Boutons
Composant de boutons de neumorphisme avec schéma de couleurs monochromatiques à des fins de portefeuille, réactif avec prise en charge du thème sombre.
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.