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 Glassmorphism Buttons

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

Ouvrir

Composant Boutons

Un composant de boutons au design minimaliste / plat avec une palette de couleurs en niveaux de gris. Il convient aux sites Web d’entreprise et a une complexité modérée avec certaines fonctionnalités interactives. Il est réactif et prend en charge le thème sombre en utilisant Tailwind CSS.

Ouvrir

Composant Boutons de conception matérielle

Composant de boutons de conception matérielle dans les tons de terre pour les médias sociaux

Ouvrir