Composants Boutons Composant Glassmorphism Buttons

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.

Aperçu

HTML Code

<div class="flex items-center justify-center h-screen bg-gray-200 dark:bg-gray-800">
  <div class="flex space-x-4">
    <button class="px-6 py-3 text-lg font-semibold text-white bg-pink-300 rounded-lg shadow-lg backdrop-filter backdrop-blur-lg bg-opacity-20 hover:bg-opacity-40 transition duration-200 ease-in-out dark:bg-pink-500 dark:bg-opacity-30 dark:hover:bg-opacity-50">
      Button 1
    </button>
    <button class="px-6 py-3 text-lg font-semibold text-white bg-blue-300 rounded-lg shadow-lg backdrop-filter backdrop-blur-lg bg-opacity-20 hover:bg-opacity-40 transition duration-200 ease-in-out dark:bg-blue-500 dark:bg-opacity-30 dark:hover:bg-opacity-50">
      Button 2
    </button>
  </div>
</div>

Composants associés

Composant Boutons

Une collection de boutons minimalistes et au design plat pour diverses actions, en utilisant une palette de couleurs complémentaires. Entièrement réactif avec prise en charge du mode sombre.

Ouvrir

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.

Ouvrir

ArtDecoECommerceButtons

Un ensemble complexe de boutons e-commerce d’inspiration Art déco avec des motifs géométriques et des tons luxueux Ocean/Blue, optimisés pour la réactivité et le mode sombre.

Ouvrir