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

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.

Ouvrir

Composant Boutons

Boutons de style Material Design avec une palette de couleurs en niveaux de gris à des fins de portfolio, avec un design réactif avec prise en charge du thème sombre.

Ouvrir

Composant Boutons

Un composant de boutons simple stylisé avec Material Design, utilisant une palette de couleurs monochromatiques et prenant en charge le mode sombre, adapté aux sites Web d’entreprise.

Ouvrir