Animated Add To Cart Button With HTML, CSS & JavaScript

Hey Programmers! In this post, we will make an Animated Add To Cart Button with HTML, CSS & JavaScript. In today’s digital marketplace enhancing user experience can help you to stand out from the other digital sites.

Add to add-to-cart button is an important component of any e-commerce site. This tutorial focuses on making an add-to-cart button that animates smoothly with pure HTML, CSS & JavaScript.

Also Read: How To Make Social Share Button With HTML & CSS

We will understand the code step by step and & see the important concepts like SVG Icon & Animation, and JavaScirpt Event Handling so that you can make such projects on your own.

At the end of this post, I will provide the entire source code so that you can run this project on your local device & make some changes.

Joinn Telegram

Concepts Used To Make Add To Cart Button

CSS Transitions
SVG Icons & Animation With CSS
JavaScript Event Handling that responds to clicks & triggers animations defined in CSS.

Understanding HTML To Make Add To Cart Button

Container Div: Contains a button element for adding items to a cart.

<button class="add-to-cart-button">

Add to Cart Button: Defines a button with the class “add-to-cart-button”.

<svg class="add-to-cart-box box-1" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <rect width="24" height="24" rx="2" fill="#ffffff"/>
</svg>

Add to Cart Box (Box 1): SVG element representing the first box in the add to cart button.

<svg class="add-to-cart-box box-2" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <rect width="24" height="24" rx="2" fill="#ffffff"/>
</svg>

Add to Cart Box (Box 2): SVG element representing the second box in the add to cart button.

<svg class="cart-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="9" cy="21" r="1"></circle>
    <circle cx="20" cy="21" r="1"></circle>
    <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
</svg>

Cart Icon: SVG element representing a cart icon.

<svg class="tick" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    <path fill="none" d="M0 0h24v24H0V0z"/>
    <path fill="#ffffff" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM9.29 16.29L5.7 12.7c-.39-.39-.39-1.02 0-1.41.39-.39 1.02-.39 1.41 0L10 14.17l6.88-6.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-7.59 7.59c-.38.39-1.02.39-1.41 0z"/>
</svg>

Tick Icon: SVG element representing a tick or checkmark icon.

<span class="add-to-cart">Add to cart</span>

Add to Cart Text: Text element indicating the action of adding an item to the cart.

<span class="added-to-cart">Added to cart</span>

Added to Cart Text: Text element indicating that the item has been successfully added to the cart.

Also Read: Make Back To Top Button With HTML, CSS & JavaScript

Understanding CSS To Make Add To Cart Button

body {
    margin: 0;
}

Body Styles: Sets the margin of the body to 0, removing any default margins.

.container {
    align-items: center;
    display: flex;
    justify-content: center;
    height: 100vh;
}

Container Styles: Align the items in the container vertically and horizontally, centering them. Uses Flexbox to achieve the alignment. Sets the height of the container to 100% of the viewport height.

.add-to-cart-button {
    background: #254ee4;
    border: none;
    border-radius: 4px;
    box-shadow: 0 3px 13px -2px rgba(0, 0, 0, 0.15);
    color: #ffffff;
    display: flex;
    font-family: "Ubuntu", sans-serif;
    justify-content: space-around;
    min-width: 195px;
    overflow: hidden;
    outline: none;
    padding: 0.8rem;
    position: relative;
    text-transform: uppercase;
    transition: 0.4s ease;
    width: auto;
}

Add to Cart Button Styles:
- Sets the background color to a shade of blue.
- Removes the border.
- Rounds the corners with a border radius of 4 pixels.
- Adds a subtle box shadow.
- Sets the text color to white.
- Uses the “Ubuntu” font family.
- Aligns the content horizontally with space around.
- Specifies a minimum width of 195 pixels.
- Allows overflow content to be hidden.
- Removes the outline when the button is clicked.
- Adds padding around the button content.
- Sets the position to relative for absolute positioning of child elements.
- Converts text to uppercase.
- Applies a transition effect with an ease of timing function.

.add-to-cart-button:active {
    box-shadow: 0 0 0 0.2rem rgba(37, 78, 228, 0.45);
    transform: translateY(4px);
}

Active Button Styles: Changes the box shadow and applies a slight downward translation when the button is clicked.

.add-to-cart-button:hover {
    cursor: pointer;
}

.add-to-cart-button:hover,
.add-to-cart-button:focus {
    box-shadow: 0 0 0 0.2rem rgba(37, 78, 228, 0.45);
    transform: translateY(-1px);
}

Hover and Focus Styles: Changes the cursor to a pointer when hovering over the button. Adjust the box shadow and apply a slight upward translation when hovering or focusing on the button.

.add-to-cart-button.added {
    background: #254ee4;
    box-shadow: 0 0 0 0.2rem rgba(37, 78, 228, 0.45);
}

Added Button Styles: Updates the background color and box shadow when the button is marked as added.

.add-to-cart-button.added .add-to-cart {
    display: none;
}

.add-to-cart-button.added .added-to-cart {
    display: block;
}

.add-to-cart-button.added .cart-icon {
    animation: drop 0.3s forwards;
    -webkit-animation: drop 0.3s forwards;
    -webkit-animation-delay: 0.18s;
    animation-delay: 0.18s;
}

.add-to-cart-button.added .box-1,
.add-to-cart-button.added .box-2 {
    top: 18px;
}

.add-to-cart-button.added .tick {
    animation: grow 0.6s forwards;
    -webkit-animation: grow 0.6s forwards;
    -webkit-animation-delay: 0.7s;
    animation-delay: 0.7s;
}

Added Button Animations: Hides the “Add to cart” text and displays the “Added to cart” text when the button is marked as added. Animates the cart icon and tick mark when the button is marked as added.

.add-to-cart,
.added-to-cart {
    margin-left: 36px;
}

.added-to-cart {
    display: none;
    position: relative;
}

Text Styles: Adds margin to the left of both “Add to cart” and “Added to cart” text elements. Initially hides the “Added to cart” text elemen

.add-to-cart-box {
    height: 5px;
    position: absolute;
    top: 0;
    width: 5px;
}

.box-1,
.box-2 {
    transition: 0.4s ease;
    top: -8px;
}

.box-1 {
    left: 23px;
    transform: rotate(45deg);
}

.box-2 {
    left: 32px;
    transform: rotate(63deg);
}

Box Styles: Defines styles for the animated boxes used in the button. Sets their initial position, size, and rotation.

.cart-icon {
    left: 15px;
    position: absolute;
    top: 8px;
}

.tick {
    background: #254ee4;
    border-radius: 50%;
    position: absolute;
    left: 28px;
    transform: scale(0);
    top: 5px;
    z-index: 2;
}

Cart Icon and Tick Styles: Defines styles for the cart icon and tick mark. Specifies their position, background color, border radius, initial scale, and z-index.

@-webkit-keyframes grow {
    0% {
        -webkit-transform: scale(0);
    }
    50% {
        -webkit-transform: scale(1.2);
    }
    100% {
        -webkit-transform: scale(1);
    }
}

@keyframes grow {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

@-webkit-keyframes drop {
    0% {
        -webkit-transform: translateY(0px);
    }
    100% {
        -webkit-transform: translateY(1px);
    }
}

@keyframes drop {
    0% {
        transform: translateY(0px);
    }
    100% {
        transform: translateY(1px);
    }
}

Animation Keyframes: Defines keyframe animations for the grow and drop effects used in the button animation.

Source Code Of Add To Cart Button

HTML:

<link href="https://fonts.googleapis.com/css?family=PT+Sans|Ubuntu:500&display=swap" rel="stylesheet">
  
<div class="container">
    <button class="add-to-cart-button">
         <svg class="add-to-cart-box box-1" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
             <rect width="24" height="24" rx="2" fill="#ffffff"/>
         </svg>
         <svg class="add-to-cart-box box-2" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
             <rect width="24" height="24" rx="2" fill="#ffffff"/>
         </svg>
         <svg class="cart-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
             <circle cx="9" cy="21" r="1"></circle>
             <circle cx="20" cy="21" r="1"></circle>
             <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
         </svg>
         <svg class="tick" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
             <path fill="none" d="M0 0h24v24H0V0z"/>
             <path fill="#ffffff" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM9.29 16.29L5.7 12.7c-.39-.39-.39-1.02 0-1.41.39-.39 1.02-.39 1.41 0L10 14.17l6.88-6.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-7.59 7.59c-.38.39-1.02.39-1.41 0z"/>
         </svg>
         <span class="add-to-cart">Add to cart</span>
         <span class="added-to-cart">Added to cart</span>
     </button>
 </div>

Also Read: Trash Button With HTML, CSS & JavaScript

CSS:

<style>
    body {
        margin: 0;
    }

    .container {
        align-items: center;
        display: flex;
        justify-content: center;
        height: 100vh;
    }

    .add-to-cart-button {
        background: #254ee4;
        border: none;
        border-radius: 4px;
        box-shadow: 0 3px 13px -2px rgba(0, 0, 0, 0.15);
        color: #ffffff;
        display: flex;
        font-family: "Ubuntu", sans-serif;
        justify-content: space-around;
        min-width: 195px;
        overflow: hidden;
        outline: none;
        padding: 0.8rem;
        position: relative;
        text-transform: uppercase;
        transition: 0.4s ease;
        width: auto;
    }

    .add-to-cart-button:active {
        box-shadow: 0 0 0 0.2rem rgba(37, 78, 228, 0.45);
        transform: translateY(4px);
    }

    .add-to-cart-button:hover {
        cursor: pointer;
    }

    .add-to-cart-button:hover, .add-to-cart-button:focus {
        box-shadow: 0 0 0 0.2rem rgba(37, 78, 228, 0.45);
        transform: translateY(-1px);
    }

    .add-to-cart-button.added {
        background: #254ee4;
        box-shadow: 0 0 0 0.2rem rgba(37, 78, 228, 0.45);
    }

    .add-to-cart-button.added .add-to-cart {
        display: none;
    }

    .add-to-cart-button.added .added-to-cart {
        display: block;
    }

    .add-to-cart-button.added .cart-icon {
        animation: drop 0.3s forwards;
        -webkit-animation: drop 0.3s forwards;
        -webkit-animation-delay: 0.18s;
        animation-delay: 0.18s;
    }

    .add-to-cart-button.added .box-1,
    .add-to-cart-button.added .box-2 {
        top: 18px;
    }

    .add-to-cart-button.added .tick {
        animation: grow 0.6s forwards;
        -webkit-animation: grow 0.6s forwards;
        -webkit-animation-delay: 0.7s;
        animation-delay: 0.7s;
    }

    .add-to-cart,
    .added-to-cart {
        margin-left: 36px;
    }

    .added-to-cart {
        display: none;
        position: relative;
    }

    .add-to-cart-box {
        height: 5px;
        position: absolute;
        top: 0;
        width: 5px;
    }

    .box-1,
    .box-2 {
        transition: 0.4s ease;
        top: -8px;
    }

    .box-1 {
        left: 23px;
        transform: rotate(45deg);
    }

    .box-2 {
        left: 32px;
        transform: rotate(63deg);
    }

    .cart-icon {
        left: 15px;
        position: absolute;
        top: 8px;
    }

    .tick {
        background: #254ee4;
        border-radius: 50%;
        position: absolute;
        left: 28px;
        transform: scale(0);
        top: 5px;
        z-index: 2;
    }

    @-webkit-keyframes grow {
        0% {
            -webkit-transform: scale(0);
        }
        50% {
            -webkit-transform: scale(1.2);
        }
        100% {
            -webkit-transform: scale(1);
        }
    }

    @keyframes grow {
        0% {
            transform: scale(0);
        }
        50% {
            transform: scale(1.2);
        }
        100% {
            transform: scale(1);
        }
    }

    @-webkit-keyframes drop {
        0% {
            -webkit-transform: translateY(0px);
        }
        100% {
            -webkit-transform: translateY(1px);
        }
    }

    @keyframes drop {
        0% {
            transform: translateY(0px);
        }
        100% {
            transform: translateY(1px);
        }
    }
</style>

JavaScript:

<script>
    document.querySelectorAll('.add-to-cart-button').forEach(function(addToCartButton) {
        addToCartButton.addEventListener('click', function() {
            addToCartButton.classList.add('added');
            setTimeout(function(){
                addToCartButton.classList.remove('added');
            }, 2000);
        });
    });
</script>

Last Updated: June 18, 2024

By JSM Hemant

About Author

JSM Hemant

Hello, Myself Hemant. I Am Web Developer & Likes To Create Awesome Projects By Using MERN, Java, Python, C++. In This Website You Will Get Cool Projects Made With Above Technologies With Full Source Code. You Can Also Follow This Website On Author Social Media: