Add to Cart Button Component
A retro/vintage styled 'Add to Cart' button component for e-commerce applications. This button has a nostalgic design inspired by the 80s and 90s, using an analogous color scheme and featuring effects for interactivity. It's responsive and supports dark themes.
HTML Code
<div class="flex flex-col items-center">
<div class="bg-gradient-to-r from-purple-500 to-pink-500 p-6 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105 dark:from-purple-700 dark:to-pink-700">
<img src="https://picsum.photos/200/100" alt="Product Image" class="w-full h-auto rounded-t-lg" />
<div class="mt-2 flex flex-col items-center">
<p class="text-white text-lg font-bold dark:text-gray-300">Cool Retro Product</p>
<span class="text-yellow-200 dark:text-yellow-300">$19.99</span>
<button class="mt-4 bg-yellow-400 text-white py-2 px-4 rounded-full transition duration-300 hover:bg-yellow-500 dark:bg-yellow-600 dark:hover:bg-yellow-700">
<span class="flex items-center justify-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-6 h-6 rounded-full mr-2" />
Add to Cart
</span>
</button>
</div>
</div>
</div>Related Components
Add to Cart Button
Responsive "Add to Cart" button with Skeuomorphic design, Monochromatic color scheme, and dark theme support.
Add to Cart Button Component
A responsive "Add to Cart" button component styled with Material Design principles, featuring a triadic color scheme and supporting dark mode. Designed for dashboard use, it includes a quantity selector and integrates depth effects using Tailwind CSS for shadows and animations.
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.