Telegram Group Join Now
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.
.png "Add To Cart Button Using HTML, CSS & JavaScript")
| Code by | Aaron Iker |
| Project Download | Link Available Below |
| Language used | HTML, CSS, and JavaScript |
| External link / Dependencies | No |
| Responsive | YES |
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.
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
Html Updated output for 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.
Restaurant Website Using HTML and CSS
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.
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.
Html CSS Updated output for add to cart button.
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.
Weather App Using Html,Css And JavaScript
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
Portfolio Website Using HTML CSS And JAVASCRIPT ( Source Code)
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!
100+ JavaScript Projects With Source Code ( Beginners to Advanced)
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.
Written by – Code With Random/Anki
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.
ADVERTISEMENT
Do you use any external links to create this project?
Yes!
ADVERTISEMENT
