Ajouter au panier Composant du bouton
Un composant de bouton « Ajouter au panier » de style rétro/vintage pour les applications de commerce électronique. Ce bouton a un design nostalgique inspiré des années 80 et 90, utilisant une palette de couleurs analogue et comportant des effets d’interactivité. Il est réactif et prend en charge les thèmes sombres.
HTML Code
<div class="flex flex-col items-center">
<div class="bg-gradient-to-r from-purple-500 to-pink-500 p-6 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105 dark:from-purple-700 dark:to-pink-700">
<img src="https://picsum.photos/200/100" alt="Product Image" class="w-full h-auto rounded-t-lg" />
<div class="mt-2 flex flex-col items-center">
<p class="text-white text-lg font-bold dark:text-gray-300">Cool Retro Product</p>
<span class="text-yellow-200 dark:text-yellow-300">$19.99</span>
<button class="mt-4 bg-yellow-400 text-white py-2 px-4 rounded-full transition duration-300 hover:bg-yellow-500 dark:bg-yellow-600 dark:hover:bg-yellow-700">
<span class="flex items-center justify-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-6 h-6 rounded-full mr-2" />
Add to Cart
</span>
</button>
</div>
</div>
</div>Composants associés
Ajouter au panier Composant du bouton
Un composant de bouton Ajouter au panier de style 3D avec des couleurs vives, un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS.
Ajouter au panier Composant du bouton
Un composant de bouton « Ajouter au panier » réactif pour les sites Web de voyage/tourisme, inspiré par la conception papier/impression avec des tons chauds de coucher de soleil. Comprend la prise en charge du mode sombre et un effet interactif subtil.
Bouton Ajouter au panier
Un bouton d’ajout au panier simple et aux tons terreux avec des effets de survol inspirés de la micro-interaction, avec un design réactif et une prise en charge du mode sombre.