Add To Cart Button

A simple, earth-toned add to cart button with microinteraction-inspired hover effects, featuring responsive design and dark mode support.

Preview

HTML Code

<button class="bg-brown-600 hover:bg-brown-700 text-white font-bold py-2 px-4 rounded-lg focus:outline-none focus:shadow-outline transition duration-300 ease-in-out transform hover:scale-105
                       dark:bg-brown-700 dark:hover:bg-brown-800">
  <span class="text-sm">Add to Cart</span>
</button>

Related Components

Add to Cart Button Component

A responsive Add to Cart Button component designed in a Brutalist style with vibrant colors, suitable for social media interfaces with dark theme support.

Open

Add to Cart Button

Add to Cart Button Component with Minimalist/Flat Design, Grayscale color scheme, Complex complexity level, for Dashboard purpose, with responsive design and dark theme support.

Open

Luxury_Retro_Add_to_Cart_Button

An elegant 'Add to Cart' (or 'Inquire Now' for real estate) button component with a luxury/premium feel and a retro/vintage color palette. Designed for real estate platforms, featuring responsive design and dark mode support.

Open