Hello, coders! The Add To Cart Button animation construction process is illustrated in this article using HTML and CSS Code. Our website's visual appeal is enhanced by the animation of the add-to-cart button. The Add To Cart Button Animation is extremely quick and straightforward using Html Code.
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.
I hope you enjoy our blog So let's start with a basic HTML structure for the Add To Cart Button Animation.
Add To Cart Button HTML Code:-
<!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 tag.
Add To Cart Button CSS Code:-
.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.
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.
Add To Cart Button JavaScript Code:-
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.
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!
This post teaches us how to create an Add To Cart Button Animation using 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
Code By - Aaron Iker
Top comments (0)