ADVERTISEMENT

Add To Cart Button Using CSS & JavaScript

Telegram Group Join Now

ADVERTISEMENT

Add To Cart Button Using CSS & JavaScript

Hello, coders! The add-to-cart animation construction process is illustrated in this article using HTML, CSS, and Javascript. Our website’s visual appeal is enhanced by the animation of the add-to-cart button. The Add to Cart button animation is an extremely quick and straightforward project for front-end developers.

ADVERTISEMENT

 
Add To Cart Button Using CSS & JavaScript
Add To Cart Button Using CSS & JavaScript

ADVERTISEMENT

 

Building an online store may benefit from this initiative. To entice people to engage with our website and provide positive feedback, that “add to basket” button animation might be implemented.
 
 
 
Play Unlimited Quiz Of HTML, CSS, and JavaScript – Click Here
Code by Aaron Iker
Project Download Link Available Below
Language used HTML, CSS, and JavaScript
External link / Dependencies No
Responsive YES
Add To Cart Button Table
 
I hope you enjoy our blog So let’s start with a basic HTML structure for the Add To Cart Button Animation.
 

Video Tutorial Of Add To Cart Button

ADVERTISEMENT

HTML Code For 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</title>
<!-- styles -->
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<button class="button">
<span>Add to cart</span>
<div class="cart">
<svg viewBox="0 0 36 26">
<polyline points="1 2.5 6 2.5 10 18.5 25.5 18.5 28.5 7.5 7.5 7.5"></polyline>
<polyline points="15 13.5 17 15.5 22 10.5"></polyline>
</svg>
</div>
</button>
<script src="app.js"></script>
</body>
</html>

There is all the HTML code for the add To Cart Button Animation. Now, you can see an output with Add To Cart Button Animation then we write javascript for Add To Cart Button Animation.

ADVERTISEMENT

The project’s structure will be included first, but first we must include certain information inside the link, such as the fact that we utilised a CSS file, which we must connect inside our HTML code.

<!-- styles --> <link rel="stylesheet" href="styles.css" />

Adding the Structure for our Add to Cart Button:

  • Here, we’ve used a container div tag to add structure and house the add-to-cart page’s structure.
  • We have created a button inside of our container using the <button> tag.

Ecommerce Website Using Html Css And Javascript

ADVERTISEMENT

Html Updated output for add to cart button.

 

add to cart button

CSS Code For Add To Cart Button

.button {
--background: #362a89;
--text: #fff;
--cart: #fff;
--tick: var(--background);
position: relative;
border: none;
background: none;
padding: 8px 28px;
border-radius: 8px;
-webkit-appearance: none;
-webkit-tap-highlight-color: transparent;
-webkit-mask-image: -webkit-radial-gradient(white, black);
overflow: hidden;
cursor: pointer;
text-align: center;
min-width: 144px;
color: var(--text);
background: var(--background);
transform: scale(var(--scale, 1));
transition: transform 0.4s cubic-bezier(0.36, 1.01, 0.32, 1.27);
}
.button:active {
--scale: 0.95;
}
.button span {
font-size: 14px;
font-weight: 500;
display: block;
position: relative;
padding-left: 24px;
margin-left: -8px;
line-height: 26px;
transform: translateY(var(--span-y, 0));
transition: transform 0.7s ease;
}
.button span:before, .button span:after {
content: '';
width: var(--w, 2px);
height: var(--h, 14px);
border-radius: 1px;
position: absolute;
left: var(--l, 8px);
top: var(--t, 6px);
background: currentColor;
transform: scale(0.75) rotate(var(--icon-r, 0deg)) translateY(var(--icon-y, 0));
transition: transform 0.65s ease 0.05s;
}
.button span:after {
--w: 14px;
--h: 2px;
--l: 2px;
--t: 12px;
}
.button .cart {
position: absolute;
left: 50%;
top: 50%;
margin: -13px 0 0 -18px;
transform-origin: 12px 23px;
transform: translateX(-120px) rotate(-18deg);
}
.button .cart:before, .button .cart:after {
content: '';
position: absolute;
}
.button .cart:before {
width: 6px;
height: 6px;
border-radius: 50%;
box-shadow: inset 0 0 0 2px var(--cart);
bottom: 0;
left: 9px;
filter: drop-shadow(11px 0 0 var(--cart));
}
.button .cart:after {
width: 16px;
height: 9px;
background: var(--cart);
left: 9px;
bottom: 7px;
transform-origin: 50% 100%;
transform: perspective(4px) rotateX(-6deg) scaleY(var(--fill, 0));
transition: transform 1.2s ease var(--fill-d);
}
.button .cart svg {
z-index: 1;
width: 36px;
height: 26px;
display: block;
position: relative;
fill: none;
stroke: var(--cart);
stroke-width: 2px;
stroke-linecap: round;
stroke-linejoin: round;
}
.button .cart svg polyline:last-child {
stroke: var(--tick);
stroke-dasharray: 10px;
stroke-dashoffset: var(--offset, 10px);
transition: stroke-dashoffset 0.4s ease var(--offset-d);
}
.button.loading {
--scale: 0.95;
--span-y: -32px;
--icon-r: 180deg;
--fill: 1;
--fill-d: 0.8s;
--offset: 0;
--offset-d: 1.73s;
}
.button.loading .cart {
animation: cart 3.4s linear forwards 0.2s;
}
@keyframes cart {
12.5% {
transform: translateX(-60px) rotate(-18deg);
}
25%, 45%, 55%, 75% {
transform: none;
}
50% {
transform: scale(0.9);
}
44%, 56% {
transform-origin: 12px 23px;
}
45%, 55% {
transform-origin: 50% 50%;
}
87.5% {
transform: translateX(70px) rotate(-18deg);
}
100% {
transform: translateX(140px) rotate(-18deg);
}
}
html {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
}
* {
box-sizing: inherit;
}
*:before, *:after {
box-sizing: inherit;
}
body {
min-height: 100vh;
display: flex;
font-family: 'Inter UI', 'Inter', Arial;
justify-content: center;
align-items: center;
background: #eceffc;
}
body .dribbble {
position: fixed;
display: block;
right: 20px;
bottom: 20px;
}
body .dribbble img {
display: block;
height: 28px;
}
body .twitter {
position: fixed;
display: block;
right: 64px;
bottom: 14px;
}
body .twitter svg {
width: 32px;
height: 32px;
fill: #1da1f2;
}

we’ll utilise some simple CSS code to add styling to our webpage. It will be simple for you to understand and attempt to incorporate your own style, which will assist you clarify your concepts. The CSS will be explained step by step.

 

Step1:We will style our button before adding styling to our project (.container). We’ll make advantage of the class selector to achieve this. The button will have a blue background thanks to the background attribute, and its pointer will be set to cursor. We will centre the text by utilising the text-align property to align it to the button’s relative position.

ADVERTISEMENT

Step2: The minimum height will be added using the body tag selector, the display property will be set to “flex,” the font-family property will be used to centre the items, the background property will be used to add a violet background to the body, and the class selector will be used to add a width and height of “32px” to our shopping button.

ADVERTISEMENT

Html CSS Updated output for add to cart button.

 
add to cart button Css
add to cart button CSS

 JavaScript Code For Add To Cart Button

document.querySelectorAll('.button').forEach(button => button.addEventListener('click', e => {
if(!button.classList.contains('loading')) {
button.classList.add('loading');
setTimeout(() => button.classList.remove('loading'), 3700);
}
e.preventDefault();
}));

The document will be used to pick the “add-to-cart-button” class. The function for each element will be used to add querySelectorAll(), a method, and an event listener to the button. Users will add the “added” class, which is specified in our CSS, to the button when they click it. Using the SetTimeout() method, our class will become inactive after 2000 milliseconds.

The Add To Cart Button Animation was created using HTML, CSS, CSS, and Javascript, and the project is now complete. Look at the live preview right now.

Final output Of add to cart Button

 
Add To Cart Button Html Css Javascript
Add To Cart Button Html Css Javascript

 

Portfolio Website Using HTML CSS And JAVASCRIPT ( Source Code)

 
Add To Cart Button Html Css Javascript
Add To Cart Button Html Css Javascript
 
Add To Cart Button Html Css Javascript
Add To Cart Button Html Css Javascript

Video Output:

Now that we have completed our javascript section for add to cart button, our updated output with javascript. Hope you like the Add To Cart Button Animation. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you!

ADVERTISEMENT

50+ Front-end Projects With Source Code

ADVERTISEMENT

This post teaches us how to create an Add To Cart Button Animation using simple HTML & CSS and JavaScript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

ADVERTISEMENT

Written by РCode With Random/Anki 

ADVERTISEMENT

Code By –¬†Aaron Iker
 
FAQ For Add To Cart Button
 

Which code editor do you use for this Add To Cart Button project coding?

I personally recommend using VS Code Studio, it’s very simple and easy to use.

ADVERTISEMENT

is this project responsive or not?

Yes! this project is a responsive project.

Do you use any external links to create this project?

Yes!

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT