Add to Cart Button
A Skeuomorphic Add to Cart button with responsive effects and dark theme support.
HTML Code
<button
class="bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 text-gray-800 dark:text-gray-200 py-3 px-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out"
>
<span class="flex items-center justify-center">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 mr-2"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<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 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"
></path>
</svg>
Add to Cart
</span>
</button>Related Components
Add to Cart Button Component
A nature-inspired, candy-colored 'Add to Cart' button component designed for a forum/community platform, featuring a flowing, organic style. It's responsive and supports dark mode.
Industrial_AddToCartButton
An industrial-style 'Add to Cart' button component designed with ocean/blue tones for government/public service websites. Features exposed elements, utilitarian aesthetics, full responsiveness, and dark mode support.
Add to Cart Button Component - Memphis Grayscale Weather
A complex 'Add to Cart' button component with Memphis design inspiration using a grayscale color scheme, adapted for a weather/climate product. Features include a dynamic icon, loading state, pulse animation, and an item count, all responsive and with dark mode support. This component is designed as a playful yet functional call-to-action for weather data subscriptions or climate-related products.