Skeuomorphic Ajouter au panier Bouton
Bouton skeuomorphic Ajouter au panier avec des couleurs vives pour un site Web de portfolio, avec un design complexe avec des éléments interactifs et une prise en charge réactive du mode sombre à l’aide de Tailwind CSS.
HTML Code
<button class="relative flex items-center justify-center p-4 overflow-hidden text-lg font-bold text-white transition-all duration-300 ease-in-out bg-gradient-to-br from-purple-600 to-blue-500 rounded-2xl shadow-2xl group focus:outline-none focus:ring-4 focus:ring-purple-800 transform hover:scale-105 active:scale-95 dark:from-gray-800 dark:to-gray-900 dark:shadow-none dark:hover:from-gray-700 dark:hover:to-gray-800">
<span class="relative z-10 flex items-center justify-center w-full h-full p-2 space-x-3 transition-all duration-300 ease-in-out bg-gradient-to-br from-purple-800 to-blue-600 rounded-xl shadow-inner-xl group-hover:from-purple-700 group-hover:to-blue-500 dark:from-gray-700 dark:to-gray-800 dark:group-hover:from-gray-600 dark:group-hover:to-gray-700">
<!-- Texture Overlay -->
<div class="absolute inset-0 z-0 bg-repeat opacity-20 dark:opacity-10" style="background-image: url('https://www.transparenttextures.com/patterns/carbon-fibre.png');"></div>
<!-- Main Button Content -->
<div class="relative z-10 flex items-center space-x-3">
<svg class="w-8 h-8 text-white transform -rotate-12 group-hover:rotate-0 transition-transform duration-300 ease-in-out" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0-10a2 2 0 110 4 2 2 0 010-4zm-8 4a2 2 0 110 4 2 2 0 010-4z"></path>
</svg>
<span class="text-white text-shadow-md">Add to Cart</span>
</div>
<!-- Dynamic Light Reflection -->
<div class="absolute top-0 left-0 w-full h-full overflow-hidden rounded-xl">
<div class="absolute w-1/2 h-full bg-white opacity-20 transform -skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-500 ease-in-out"></div>
</div>
<!-- Inner Shadow for Depth -->
<div class="absolute inset-0 rounded-xl shadow-inner-2xl dark:shadow-inner-2xl-dark"></div>
</span>
<!-- Outer Bevel/Emboss Effect -->
<div class="absolute inset-0 border-4 border-white border-opacity-10 rounded-2xl dark:border-opacity-5"></div>
</button>
<style>
/* Custom shadow for Skeuomorphism */
.shadow-inner-xl {
box-shadow: inset 0 5px 15px rgba(0, 0, 0, 0.3), inset 0 -5px 10px rgba(255, 255, 255, 0.1);
}
.shadow-inner-2xl {
box-shadow: inset 0 8px 20px rgba(0, 0, 0, 0.4), inset 0 -8px 15px rgba(255, 255, 255, 0.15);
}
.shadow-inner-2xl-dark {
box-shadow: inset 0 8px 20px rgba(0, 0, 0, 0.6), inset 0 -8px 15px rgba(255, 255, 255, 0.05);
}
.text-shadow-md {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
</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 Composant du bouton - Memphis Grayscale Météo
Un composant complexe de bouton « Ajouter au panier » avec l’inspiration du design de Memphis utilisant une palette de couleurs en niveaux de gris, adapté à un produit météo/climat. Les fonctionnalités comprennent une icône dynamique, un état de chargement, une animation d’impulsion et un nombre d’éléments, le tout réactif et prenant en charge le mode sombre. Ce composant est conçu comme un appel à l’action ludique et fonctionnel pour les abonnements aux données météorologiques ou les produits liés au climat.
Ajouter au panier Composant du bouton
Un bouton complexe Ajouter au panier conçu avec une esthétique rétro/vintage et une palette de couleurs complémentaire, adapté à un site Web d’entreprise professionnel. Ce composant prend en charge le mode sombre et est réactif, utilisant Tailwind CSS pour le coiffage.