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.
HTML Code
<div class="flex justify-center items-center p-4 bg-gradient-to-br from-fuchsia-50 to-purple-50 dark:from-purple-950 dark:via-fuchsia-950 dark:to-teal-950 min-h-screen">
<button class="relative flex items-center justify-center py-3 px-8 text-lg font-semibold text-fuchsia-800 bg-gradient-to-r from-fuchsia-200 via-rose-100 to-purple-200 rounded-full shadow-lg overflow-hidden transition-all duration-300 ease-in-out
dark:from-fuchsia-800 dark:via-rose-700 dark:to-purple-800 dark:text-fuchsia-50 dark:shadow-xl dark:shadow-fuchsia-900/50
hover:scale-105 hover:shadow-xl hover:shadow-fuchsia-300/60 dark:hover:shadow-fuchsia-700/70
focus:outline-none focus:ring-4 focus:ring-fuchsia-300 dark:focus:ring-fuchsia-700
active:scale-95">
<span class="relative z-10 flex items-center space-x-2">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M16 16h.01"></path>
</svg>
<span>Add to Cart</span>
</span>
<div class="absolute inset-0 bg-gradient-to-r from-fuchsia-100 via-rose-50 to-purple-100 opacity-0 transition-opacity duration-300 ease-in-out group-hover:opacity-100
dark:from-fuchsia-700 dark:via-rose-600 dark:to-purple-700"></div>
<!-- Nature-inspired flowing lines overlay -->
<svg class="absolute inset-0 w-full h-full opacity-30 pointer-events-none transform scale-150 transition-transform duration-500 ease-in-out group-hover:scale-100
dark:opacity-10 dark:text-fuchsia-300" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M0 50 C 25 20, 75 80, 100 50 L 100 100 L 0 100 Z" fill="currentColor" class="text-fuchsia-300/50 dark:text-fuchsia-600/50"></path>
<path d="M0 60 C 20 90, 80 10, 100 40 V 100 H 0 Z" fill="currentColor" class="text-purple-300/50 dark:text-purple-600/50"></path>
</svg>
</button>
</div>Composants associés
Industrial_AddToCartButton
Un composant de bouton « Ajouter au panier » de style industriel conçu avec des tons océan/bleu pour les sites Web gouvernementaux/de services publics. Comprend des éléments exposés, une esthétique utilitaire, une réactivité totale et une prise en charge du mode sombre.
Rétro Ajouter au panier Bouton
Bouton « Ajouter au panier » réactif avec un design rétro/vintage, une palette de couleurs complémentaire et une complexité modérée pour un tableau de bord. Prend en charge le mode sombre.
Ajouter au panier Composant du bouton
Un composant complexe de bouton « ajouter au panier » pour les applications médicales/de soins de santé, inspiré de la typographie suisse/internationale et des tons de terre. Il présente un design épuré et minimaliste qui met l’accent sur la typographie et les systèmes de grille, offrant une réactivité totale et une prise en charge du mode sombre.