Ajouter au panier Composant du bouton
Un composant de bouton « Ajouter au panier » de style 3D conçu pour les interfaces de médias sociaux. Il dispose d’une interface riche avec de la profondeur, des éléments de conception attrayants et est réactif avec la prise en charge des thèmes sombres.
HTML Code
<div class="flex items-center justify-center p-4">
<div class="relative group">
<button class="relative z-10 block rounded-lg bg-blue-500 p-4 text-white text-lg font-semibold shadow-md transition-transform transform-gpu hover:scale-105 focus:outline-none dark:bg-blue-700">
<span>Add to Cart</span>
<span class="absolute top-0 left-0 w-full h-full bg-yellow-400 rounded-lg opacity-0 group-hover:opacity-40 transition-opacity duration-300"></span>
</button>
<div class="absolute -bottom-3 -right-3 w-12 h-12 rounded-full bg-red-500 shadow-lg flex items-center justify-center transform rotate-45 transition-transform duration-300 group-hover:scale-110">
<img src="https://picsum.photos/40" alt="Product Image" class="rounded-full">
</div>
<div class="absolute -bottom-16 -left-16 w-10 h-10 rounded-full bg-green-500 shadow-lg">
<img src="https://picsum.photos/30" alt="Decorative Element" class="rounded-full">
</div>
</div>
</div>
<style>
@media (prefers-color-scheme: dark) {
.bg-blue-500 { background-color: #3b82f6; }
.bg-blue-700 { background-color: #1d4ed8; }
.bg-yellow-400 { background-color: #f59e0b; }
.bg-red-500 { background-color: #ef4444; }
.bg-green-500 { background-color: #22c55e; }
.text-white { color: #ffffff; }
}
</style>Composants associés
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.
Luxury_Retro_Add_to_Cart_Button
Un élégant composant de bouton « Ajouter au panier » (ou « Renseignez-vous maintenant » pour l’immobilier) avec une sensation de luxe / haut de gamme et une palette de couleurs rétro / vintage. Conçu pour les plateformes immobilières, avec un design réactif et une prise en charge du mode sombre.
Ajouter au panier Composant du bouton
Un composant réactif du bouton Ajouter au panier conçu dans un style brutaliste avec des couleurs vives, adapté aux interfaces de médias sociaux avec prise en charge du thème sombre.