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 inspiré du brutalisme avec Tailwind CSS, avec un contraste élevé, des mises en page inhabituelles, des effets réactifs et la prise en charge des thèmes sombres.
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.
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.