Contents
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:wght@500&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 button html w3schools#add to cart html css #add to cart html code