Composants Boutons Composant Boutons neumorphes

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.

Aperçu

HTML Code

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <h2 class="mb-4 text-2xl font-bold dark:text-white">Neumorphic Buttons</h2>
  <div class="flex space-x-4">
    <button class="relative group p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-lg hover:-translate-y-1 active:translate-y-0 active:shadow-md">
      <span class="text-gray-900 dark:text-gray-200">Button 1</span>
      <div class="absolute inset-0 rounded-lg bg-gray-200 dark:bg-gray-700 blur-md shadow-lg opacity-30 group-hover:opacity-20 transition-opacity duration-300"></div>
    </button>
    <button class="relative group p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-lg hover:-translate-y-1 active:translate-y-0 active:shadow-md">
      <span class="text-gray-900 dark:text-gray-200">Button 2</span>
      <div class="absolute inset-0 rounded-lg bg-gray-200 dark:bg-gray-700 blur-md shadow-lg opacity-30 group-hover:opacity-20 transition-opacity duration-300"></div>
    </button>
    <button class="relative group p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-lg hover:-translate-y-1 active:translate-y-0 active:shadow-md">
      <span class="text-gray-900 dark:text-gray-200">Button 3</span>
      <div class="absolute inset-0 rounded-lg bg-gray-200 dark:bg-gray-700 blur-md shadow-lg opacity-30 group-hover:opacity-20 transition-opacity duration-300"></div>
    </button>
  </div>
</div>

Composants associés

Composant Boutons

Un composant de bouton à thème rétro-vintage avec une palette de couleurs triadiques, une complexité simple et un design réactif avec prise en charge du mode sombre, adapté à un blog ou à un site Web de contenu.

Ouvrir

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.

Ouvrir

Boutons Néon Art Déco

Composants de boutons simples et réactifs avec un style géométrique Art déco et une palette de couleurs néon/électrique vibrantes, adaptés aux applications de soins de santé. Inclut la prise en charge du mode sombre.

Ouvrir