Add to Cart Button Component
Add to Cart Button designed for Dark Mode UI with Earth tones color scheme, and complex complexity level, for Portfolio purpose. The component is responsive and supports dark theme using Tailwind's dark: prefix.
HTML Code
<button class="bg-stone-700 hover:bg-stone-600 text-stone-100 py-3 px-6 rounded-lg font-semibold text-lg shadow-lg transition duration-300 ease-in-out dark:bg-stone-800 dark:hover:bg-stone-700 dark:text-stone-200 dark:shadow-xl"> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline-block mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-4-4H8a4 4 0 00-4 4v4m11 0l-3 4m0 0h3v3zm-3-4v1m10-4v2a2 2 0 01-2 2H7a2 2 0 01-2-2V7a2 2 0 012-2h10a2 2 0 012 2z" /> </svg> Add to Cart </button>Related Components
Add to Cart Button
A responsive Add to Cart button styled with Material Design principles using Tailwind CSS, supporting dark mode themes.
Add to Cart Button Component
A responsive 'Add to Cart' button designed in dark mode using Tailwind CSS, with hover effects and dark theme support.
Add to Cart Button
A Skeuomorphic 'Add to Cart' button component designed with Tailwind CSS, featuring responsive effects and dark theme support.