Composants Ajouter au panier Bouton Ajouter au panier Composant du bouton

Ajouter au panier Composant du bouton

Un composant de bouton « Ajouter au panier » réactif avec des couleurs triadiques, un focus sur la micro-interaction et une prise en charge du mode sombre pour les applications de commerce électronique.

Aperçu

HTML Code

<div class="flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 min-h-screen">
  <button class="group relative flex items-center justify-center px-6 py-3 rounded-full text-lg font-semibold
    bg-emerald-500 text-white
    hover:bg-emerald-600 focus:outline-none focus:ring-4 focus:ring-emerald-300 dark:focus:ring-emerald-700
    transition-all duration-300 ease-in-out
    overflow-hidden
    shadow-lg hover:shadow-xl
    dark:bg-emerald-600 dark:hover:bg-emerald-700">
    <span class="relative z-10 transition-transform duration-300 ease-in-out group-hover:-translate-x-full opacity-100 group-hover:opacity-0 whitespace-nowrap">
      Add to Cart
    </span>
    <span class="absolute inset-0 flex items-center justify-center transform translate-x-full group-hover:translate-x-0
      transition-transform duration-300 ease-in-out
      text-purple-200 dark:text-purple-300
      bg-purple-600 dark:bg-purple-700
      rounded-full
      scale-y-0 group-hover:scale-y-100
      opacity-0 group-hover:opacity-100
      group-hover:px-6 group-hover:py-3">
      <svg class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
      </svg>
      Added!
    </span>
    <span class="absolute inset-0 flex items-center justify-center transform translate-x-full group-hover:translate-x-0
      transition-transform duration-300 ease-in-out delay-150
      text-orange-200 dark:text-orange-300
      bg-orange-500 dark:bg-orange-600
      rounded-full
      scale-y-0 group-hover:scale-y-100
      opacity-0 group-hover:opacity-100
      group-hover:px-6 group-hover:py-3
      hidden">
      <svg class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.182 1.703.707 1.703H17m0-10a2 2 0 110 4 2 2 0 010-4zm-7 4a2 2 0 110 4 2 2 0 010-4z" />
      </svg>
      Adding...
    </span>
  </button>
</div>

Composants associés

Ajouter au panier Composant du bouton

Un composant de bouton « Ajouter au panier » de couleur pastel inspiré de la nature, conçu pour les applications médicales/de santé, avec des lignes fluides et un design réactif avec prise en charge du mode sombre.

Ouvrir

Ajouter au panier Composant du bouton

Un bouton réactif « Ajouter au panier » conçu en mode sombre à l’aide de Tailwind CSS, avec des effets de survol et la prise en charge du thème sombre.

Ouvrir

Ajouter au panier Glassmorphism Earth Tones Button

Un simple bouton « Ajouter au panier » conçu avec un style glassmorphism, en utilisant des tons de terre, adapté à une application sur le thème de la météo et du climat. Il est entièrement réactif et prend en charge le mode sombre.

Ouvrir