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.
HTML Code
<div class="flex items-center justify-center p-4 bg-orange-50 dark:bg-gray-950 min-h-screen">
<button class="relative group overflow-hidden px-8 py-3 rounded-lg shadow-md bg-gradient-to-br from-red-500 to-orange-500 dark:from-red-700 dark:to-orange-700
text-white font-semibold uppercase tracking-wider text-base md:text-lg
transition-all duration-300 ease-in-out
focus:outline-none focus:ring-4 focus:ring-red-300 dark:focus:ring-red-800
hover:shadow-lg hover:scale-105
before:content-[''] before:absolute before:inset-0 before:bg-white before:opacity-0 before:blur-md
group-hover:before:opacity-10 group-hover:before:animate-pulse">
<span class="relative z-10 flex items-center justify-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transform -rotate-12 group-hover:rotate-0 transition-transform duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
</svg>
Add to Cart
</span>
<!-- Paper Fold Detail (Pseudo-element-like via nested div for simplicity) -->
<div class="absolute -bottom-2 -right-2 w-8 h-8 rounded-br-lg bg-red-600 dark:bg-red-800 group-hover:bg-red-700 dark:group-hover:bg-red-900 transition-colors duration-300 transform rotate-45 origin-bottom-right group-hover:scale-110">
<div class="absolute inset-0 w-full h-full bg-orange-400 dark:bg-orange-600 opacity-30 transform -translate-x-1 -translate-y-1 rounded-br-lg"></div>
</div>
<!-- Subtle Grain/Texture Overlay (Pseudo-element-like via nested div) -->
<div class="absolute inset-0 opacity-10 bg-repeat" style="background-image: url('data:image/svg+xml,%3Csvg width="6" height="6" viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23000000" fill-opacity="0.1" fill-rule="evenodd"%3E%3Cpath d="M5 0h1L0 6V5zM6 5v1H0v-1z"/%3E%3C/g%3E%3C/svg%3E');"></div>
</button>
</div>Composants associés
Ajouter au panier Composant du bouton
Bouton conçu pour l’interface utilisateur du mode sombre avec une palette de couleurs de tons de terre et un niveau de complexité complexe, à des fins de portefeuille. Le composant est réactif et prend en charge le thème sombre à l’aide du préfixe dark : de Tailwind.
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 bouton réactif « Ajouter au panier » conçu en mode sombre à l’aide de Tailwind CSS, avec des effets de survol et la prise en charge du thème sombre.