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 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 Bouton
Un composant de bouton d’ajout au panier réactif conçu dans un style skeuomorphe, avec des couleurs vives et une prise en charge du thème sombre, adapté aux interfaces de médias sociaux.
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.