Add to Cart Button Template

Improve your e-commerce experience with an interactive button that confirms when an item is added to the cart.

This button provides essential visual feedback, changing its state to "Added" upon click, which helps build user confidence during the shopping process.

Get Source Code Preview

About the Add to Cart Button

In e-commerce, clear communication is key. An "Add to Cart" button shouldn't just be a link; it should be an experience that provides instant confirmation. This template is designed to do just that. When a user clicks the button, it visually transforms to a "success" state, temporarily preventing multiple clicks and assuring the user that their action was registered.

Features

Interactive Feedback: Uses a small JavaScript snippet to change the button's text and icon, providing a clear "Added" confirmation.
Prevents Multiple Clicks: The button is temporarily disabled after being clicked to avoid accidental duplicate submissions while an item is being added.
Iconography Included: Comes with embedded SVG icons for both the "cart" and "success checkmark" states.
Clean and Responsive: The button and its contents are perfectly aligned with Flexbox and adapt well to any screen size.

Code Breakdown

This component consists of HTML, CSS, and a small, self-contained JavaScript block. The button contains two icons (a cart and a checkmark) and a span for the text. By default, the checkmark icon is hidden with display: none.

The JavaScript listens for a click on the button. When clicked, it adds an is-added class. This class uses CSS to hide the cart icon and show the checkmark icon. The script also changes the text content, disables the button, and uses a setTimeout function to reset the button to its original state after two seconds.

Code

Here is the complete HTML, CSS, and JavaScript for the interactive "Add to Cart" button.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Add to Cart Button</title>
    <style>
        /*
         Component: Interactive Add to Cart Button
         Description: An e-commerce button with an icon and a JavaScript-powered success state.
        */

:root {
            --cart-add-bg: #007bff;
            --cart-add-text: #ffffff;
            --cart-add-bg-hover: #0069d9;
            --cart-added-bg: #28a745;
            --cart-added-text: #ffffff;
            --cart-focus-outline: #007bff;
        }

.add-to-cart-container-1 {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 2rem;
            background-color: #f8f9fa; /* Example background */
        }

.add-to-cart-btn-1 {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.75rem;
            padding: 0.8rem 1.6rem;
            font-size: 1rem;
            font-weight: 600;
            color: var(--cart-add-text);
            background-color: var(--cart-add-bg);
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.2s ease-in-out;
            min-width: 150px; /* Prevents button from shrinking/growing during text change */
        }

.add-to-cart-btn-1 svg {
            width: 1.2em;
            height: 1.2em;
            fill: currentColor;
            transition: transform 0.3s ease;
        }

.add-to-cart-btn-1:hover {
            background-color: var(--cart-add-bg-hover);
        }
        
        .add-to-cart-btn-1:focus-visible {
            outline: 3px solid var(--cart-focus-outline);
            outline-offset: 2px;
        }
        
        .add-to-cart-btn-1 .icon-check {
            display: none;
        }

/* --- State when item is added --- */
        .add-to-cart-btn-1.is-added {
            background-color: var(--cart-added-bg);
            color: var(--cart-added-text);
            cursor: not-allowed;
        }
        
        .add-to-cart-btn-1.is-added .icon-cart {
            display: none;
        }
        
        .add-to-cart-btn-1.is-added .icon-check {
            display: inline-block;
        }
    </style>
</head>
<body>

// Revert button to original state after 2 seconds
                setTimeout(() => {
                    this.classList.remove('is-added');
                    this.disabled = false;
                    buttonText.textContent = originalText;
                }, 2000);
            });
        });
    </script>

</body>
</html>

View Output