Composants Ajouter au panier Bouton Skeuomorphic Ajouter au panier Bouton

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.

Aperçu

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 Bouton

Un composant de bouton skeuomorphique 'Ajouter au panier' conçu avec Tailwind CSS, avec des effets réactifs et la prise en charge des thèmes sombres.

Ouvrir

Ajouter au panier Composant du bouton

Un composant de bouton « Ajouter au panier » inspiré de la nature, de couleur bonbon, conçu pour un forum/une plate-forme communautaire, avec un style fluide et organique. Il est réactif et prend en charge le mode sombre.

Ouvrir

Ajouter au panier Bouton

Bouton « Ajouter au panier » réactif avec design Skeuomorphic, palette de couleurs monochromatique et prise en charge du thème sombre.

Ouvrir