Composants Boutons Composant Boutons

Composant Boutons

Composant de boutons réactifs avec conception matérielle, schéma de couleurs triadique et prise en charge du thème sombre.

Aperçu

HTML Code

<div class="flex flex-wrap gap-4 p-4 bg-white dark:bg-gray-800">
  <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded shadow-lg dark:bg-blue-700 dark:hover:bg-blue-900 transition duration-300 ease-in-out">Primary Button</button>
  <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded shadow-lg dark:bg-green-700 dark:hover:bg-green-900 transition duration-300 ease-in-out">Secondary Button</button>
  <button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded shadow-lg dark:bg-red-700 dark:hover:bg-red-900 transition duration-300 ease-in-out">Danger Button</button>
  <button class="bg-yellow-500 hover:bg-yellow-700 text-white font-bold py-2 px-4 rounded shadow-lg dark:bg-yellow-700 dark:hover:bg-yellow-900 transition duration-300 ease-in-out">Warning Button</button>
  <button class="bg-purple-500 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded shadow-lg dark:bg-purple-700 dark:hover:bg-purple-900 transition duration-300 ease-in-out">Info Button</button>
  <button class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded shadow-lg dark:bg-gray-700 dark:hover:bg-gray-900 transition duration-300 ease-in-out">Neutral Button</button>
</div>

Composants associés

Retro_Rainbow_Buttons_Component

Une collection de boutons arc-en-ciel dégradés à thème rétro conçus pour les galeries de photographie et les portfolios, avec une complexité modérée et une réactivité totale et une prise en charge du mode sombre.

Ouvrir

Composant Glassmorphism Buttons

Boutons Glassmorphism utilisant des tons de terre pour un site Portfolio réactif avec mode sombre

Ouvrir

Boutons de divertissement ludiques

Un ensemble de boutons ludiques et amusants conçus pour une plate-forme de divertissement ou de médias, avec des couleurs sourdes/désaturées et des éléments arrondis. Réactif et inclut la prise en charge du mode sombre.

Ouvrir