CSS Animations: How to make Add to Cart Button Animated [2022]

by stackdeveloping
0 comment 144 views
add-to-cart-button

Create Shopping cart JavaScript Add to Cart Button Animated

As everyone now, in this kind of industry, e-Commerce application get a large space in the market of web developing. Today we discover a unique design for your  Add To Cart button html css. Everyone can try to design “buy now button for WooCommerce” or Shopify add to cart. We think that your e-commerce website will look different by using this design of button. In this article we have used HTML Code, CSS and CSS3 also Javascript.

HTML CSS Preview step adding

HTML Step

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <span class="cart__button">
          <span class="add__to-cart">Add to cart</span>
          <span class="added">Added</span>
          <i class="fas fa-shopping-cart"></i>
          <i class="fas fa-box"></i>
    </span>    
</body>
<script src="https://kit.fontawesome.com/3431c04d0c.js"></script>
<script src="main.js"></script>
</html>

In this section we have create only the part of code where we will design, only the button. For that we have gave to each element class attributes for representing the effect of each element. Also similar project you can find on by searching – add to cart javascript w3schools.

CSS Step

@import url(https://fonts.googleapis.com/css2?family=Poppins:[email protected]&display=swap);

*{
    margin: 0;
    padding:0;
    box-sizing: border-box;
}
body{
  font-family:'Poppins', sans-serif;
  background-color: hsl(0, 0%, 98%);
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items:center ;
}
.cart__button{
    position: relative; 
    width: 200px;
    height: 62px;
    background-color: hsl(250, 69%, 61%);
    border-radius: 10px;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    cursor: pointer;
    overflow: hidden;
    transition:  .3s ease-in-out;
}
.cart__button:hover{
    background-color: hsl(250, 57%, 53%);
}
.cart__button:active{
    transform: scale(.9);
}

.fa-shopping-cart  {
    position: absolute;
    z-index: 2;
    top:50%;
    left: -10%;
    transform: translate(-50%, -50%);
    font-size: 24px;
     
}

.fa-box{
   position: absolute;
   z-index: 3;
   top: -20%;
   left: 52%;
   transform:translate(-50%, -50%) ; 
   font-size: 14px;
    
}

.cart__button span{
    position: absolute;
    left: 50%;
    top: 50%;
    z-index:3;
    transform: translate(-50%, -50%);
}
.added{
    opacity: 0;
}
.add__to-cart{
    opacity: 1;
}
.cart__button.clicked .fa-shopping-cart{
    animation: cart 1.5s ease-in-out forwards;
}

.cart__button.clicked .fa-box{
    animation: box 1.5s ease-in-out forwards;
}

.cart__button.clicked .add__to-cart{
    animation: txt1 1.5s ease-in-out forwards;
}
 
.cart__button.clicked .added{
    animation: txt2 1.5s ease-in-out forwards;
}

@keyframes cart {
    0% {
        left: -10%;
    }
    40%, 60% {
        left: 50%;
    }
    100%{
        left:110%;
    }
}
@keyframes box{
    0%, 40% {
      top: -20%;  
    }
    60% {
        top:40%;
        left: 52%;
    }
    100% {
        top:40%;
        left: 112%;
    }
}

@keyframes txt1 {
    0% {
        opacity: 1;
    }
    20%, 100% {
        opacity: 0;
    }
}
@keyframes txt2 {
    0%, 80%{
        opacity: 0;
    }
     100% {
        opacity: 1;
    }
}

In this part we have created a custom design for our button with some transition effect, also we have created 4 animations effect  which they are cart, boc, txt1 and txt2 after we have declared the part of animation we used to managed using @keyframes part of CSS3.  All these effect will be visible only if we have attributed our elements with “clicked” class.

JavaScript Code

const cartButton = document.querySelectorAll('.cart__button');
cartButton.forEach(button=>{
    button.addEventListener('click', cartClick);
});

function cartClick(){
    let button= this;
    button.classList.add('clicked');
     setTimeout(()=>button.classList.remove('clicked'), 3000);
}

In this part of code, we have selected all children  elements inside cart__button class element, using forEach loop function that its self return what happen if we apply an event listener. So if we click on this button – button.classList.add(‘clicked’); – so all 4 animated elements will override with the class .clicked.

Check also the animation in the video.

Add to Cart Animated Button

Do you want to see this button live Try It now

You may also like

Leave a Comment

* By using this form you agree with the storage and handling of your data by this website.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More