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 Component
A complex Add to Cart button designed with a retro/vintage aesthetic and a complementary color scheme, suitable for a professional company website. This component supports dark mode and is responsive, utilizing Tailwind CSS for styling.
Add to Cart Button Component
A responsive 'Add to Cart' button component with triadic colors, microinteraction focus, and dark mode support for e-commerce applications.
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.