Create "Add To Cart" Button Using HTML , CSS & Javascript

Hello, Coders! This article demonstrates how to use HTML, CSS, and Javascript to construct an Add To Cart Animation. The add-to-cart Button animation helps to improve the aesthetic appeal of our website.

For front-end developers, Add to Cart button Animation is a very short and simple project. This project can be useful for building an online store. This "add to cart" Button animation might be used there to encourage visitors to connect with our website and provide favourable reviews.

We have used SVG into our project . I know most of you are not aware about what SVG's are but as i already told that this project is beginner friendly and we will be explaining all concepts step by step so that you may not face any issue after reading this article.

What are SVG?

Scalable Vector Graphics is the abbreviation for this technology. SVGs are a form of graphic image, to put it simply. These photos can be resized and are pixel-perfect at all sizes. We will employ SVGs to make our website look appealing since if we use photos like jpg or jpeg, eventually their pixels start distorting.

I hope you get a glimpse of what we're working on. To achieve this add to cart Button aniamtion, simple HTML, CSS & Javascript will be used. We will continue to go over our project step by step. Let's start by giving our project some Structure using HTML.

Three files were utilised in this project. To organise our code and make it clear that we used separate files for HTML, CSS, and Javascript when we verify it later, we use three different files.

Step1: Adding Some Basic HTML

HTML stands for HyperText Markup Language. This is a markup language. Its main job is to give our project structure. We will provide our project structure by utilising this markup language. So let's look at our HTML code.

We have used W3C SVG to incorporate them into our product in order to add the structure.

<!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>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container">
    <button class="add-to-cart-button">
         <svg class="add-to-cart-box box-1" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="24" height="24" rx="2" fill="#ffffff"/></svg>
         <svg class="add-to-cart-box box-2" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="24" height="24" rx="2" fill="#ffffff"/></svg>
         <svg class="cart-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
         <svg class="tick" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path fill="#ffffff" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM9.29 16.29L5.7 12.7c-.39-.39-.39-1.02 0-1.41.39-.39 1.02-.39 1.41 0L10 14.17l6.88-6.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-7.59 7.59c-.38.39-1.02.39-1.41 0z"/></svg>
         <span class="add-to-cart">Add to cart</span>
         <span class="added-to-cart">Added to cart</span>
     </button>
 </div>
 <script src="index.js"></script>
</body>

</html>

Here, we've added structure by using a container div tag, which will house the add-to-cart page's structure.
Using the tag, we have produced a button inside our container. We have included 4 SVGs inside the button tag, which we will use to add the animation using CSS and JavaScript.
Within our button tag, we inserted two tags to include the name of our button.

We have added the basic structure to our Add to Cart page. Let's take a look at our HTML structure.

All that is needed for us to give our webpage some structure we just added through our HTML code. We're going to style our add-to-cart animation now using CSS. We must link our external stylesheet before we can add any styles. You must include the URL below in your HTML head section in order to do that.

<link rel="stylesheet" href="styles.css">

Step2: Adding CSS

.add-to-cart-button {
  background: #e6a247;
  border: none;
  border-radius: 4px;
  -webkit-box-shadow: 0 3px 13px -2px rgba(0, 0, 0, .15);
  box-shadow: 0 3px 13px -2px rgba(0, 0, 0, .15);
  color: #fff;
  display: flex;
  font-family: 'Ubuntu', sans-serif;
  justify-content: space-around;
  min-width: 195px;
  overflow: hidden;
  outline: none;
  padding: 0.7rem;
  position: relative;
  text-transform: uppercase;
  transition: 0.4s ease;
  width: auto;
}
.add-to-cart-button:active {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(252, 186, 3, .45);
  box-shadow: 0 0 0 0.2rem rgba(252, 186, 3, .45);
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
}
.add-to-cart-button:hover {
  cursor: pointer;
}
.add-to-cart-button:hover, .add-to-cart-button:focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(252, 186, 3, .45);
  box-shadow: 0 0 0 0.2rem rgba(252, 186, 3, .45);
  -webkit-transform: translateY(-1px);
  transform: translateY(-1px);
}
.add-to-cart-button.added {
  background: #2fbf30;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(11, 252, 3, 0.45);
  box-shadow: 0 0 0 0.2rem rgba(11, 252, 3, 0.45);
}
.add-to-cart-button.added .add-to-cart {
  display: none;
}
.add-to-cart-button.added .added-to-cart {
  display: block;
}
.add-to-cart-button.added .cart-icon {
  animation: drop 0.3s forwards;
  -webkit-animation: drop 0.3s forwards;
  animation-delay: 0.18s;
}
.add-to-cart-button.added .box-1, .add-to-cart-button.added .box-2 {
  top: 18px;
}
.add-to-cart-button.added .tick {
  animation: grow 0.6s forwards;
  -webkit-animation: grow 0.6s forwards;
  animation-delay: 0.7s;
}
.add-to-cart, .added-to-cart {
  margin-left: 36px;
}
.added-to-cart {
  display: none;
  position: relative;
}
.add-to-cart-box {
  height: 5px;
  position: absolute;
  top: 0;
  width: 5px;
}
.box-1, .box-2 {
  transition: 0.4s ease;
  top: -8px;
}
.box-1 {
  left: 23px;
  transform: rotate(45deg);
}
.box-2 {
  left: 32px;
  transform: rotate(63deg);
}
.cart-icon {
  left: 15px;
  position: absolute;
  top: 8px;
}
.tick {
  background: #146230;
  border-radius: 50%;
  position: absolute;
  left: 28px;
  transform: scale(0);
  top: 5px;
  z-index: 2;
}
@-webkit-keyframes grow {
  0% {
    -webkit-transform: scale(0);
 }
  50% {
    -webkit-transform: scale(1.2);
 }
  100% {
    -webkit-transform: scale(1);
 }
}
@keyframes grow {
  0% {
    transform: scale(0);
 }
  50% {
    transform: scale(1.2);
 }
  100% {
    transform: scale(1);
 }
}
@-webkit-keyframes drop {
  0% {
    -webkit-transform: translateY(0px);
 }
  100% {
    -webkit-transform: translateY(1px);
 }
}
@keyframes drop {
  0% {
    transform: translateY(0px);
 }
  100% {
    transform: translateY(1px);
 }
}
/* Page style */
.container {
  align-items: center;
  display: flex;
  height: 100vh;
  justify-content: center;
  width: 100%;
}

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: In order to add styling to our project (.container), we will style our button. To do this, we will use the class selector. We selected "Indian yellow" as the backdrop colour. In order to give our button's corner some curve, we applied a border radius. It was set to "flex" on the display.

Additionally, we added a minimum width of "195px" to our button and, using the text transform property, changed the text's case to "uppercase." We also gave our button a "easy" transition.

.add-to-cart-button {
  background: #e6a247;
  border: none;
  border-radius: 4px;
  -webkit-box-shadow: 0 3px 13px -2px rgba(0, 0, 0, .15);
  box-shadow: 0 3px 13px -2px rgba(0, 0, 0, .15);
  color: #fff;
  display: flex;
  font-family: 'Ubuntu', sans-serif;
  justify-content: space-around;
  min-width: 195px;
  overflow: hidden;
  outline: none;
  padding: 0.7rem;
  position: relative;
  text-transform: uppercase;
  transition: 0.4s ease;
  width: auto;
}

Step2: For selecting and styling the active link, utilise the active selector. By clicking on a link, it becomes active. We'll apply the box shadow to our button as soon as the link button activates. Our button will be positioned in accordance with the y-axis using the transform attribute (4px).

We additionally gave our button some hovering property as the user hover it the pointer change to cursor.

.add-to-cart-button:active {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(252, 186, 3, .45);
  box-shadow: 0 0 0 0.2rem rgba(252, 186, 3, .45);
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
}
.add-to-cart-button:hover {
  cursor: pointer;
}
.add-to-cart-button:hover, .add-to-cart-button:focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(252, 186, 3, .45);
  box-shadow: 0 0 0 0.2rem rgba(252, 186, 3, .45);
  -webkit-transform: translateY(-1px);
  transform: translateY(-1px);
}
.add-to-cart-button.added {
  background: #2fbf30;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(11, 252, 3, 0.45);
  box-shadow: 0 0 0 0.2rem rgba(11, 252, 3, 0.45);
}
.add-to-cart-button.added .add-to-cart {
  display: none;
}
.add-to-cart-button.added .added-to-cart {
  display: block;
}

Step3: Now we will add styling to our SVG icons. First of all, we will style our cart icon. We have added the animation of a drop that then moves forward with a delay of 0.18 seconds. We have added a top space of 18px to our svg box icons.

Using the (.tick) class selector, we have added an animation of growing and then added a move forward animation, with a delay of 0.7s between both animations.

These animations will work when we add the javascript function and when the user clicks on the button.

.add-to-cart-button.added .cart-icon {
  animation: drop 0.3s forwards;
  -webkit-animation: drop 0.3s forwards;
  animation-delay: 0.18s;
}
.add-to-cart-button.added .box-1, .add-to-cart-button.added .box-2 {
  top: 18px;
}
.add-to-cart-button.added .tick {
  animation: grow 0.6s forwards;
  -webkit-animation: grow 0.6s forwards;
  animation-delay: 0.7s;
}

Step4: Our svg icon will now have width, height, padding, and margin added. The Keyframe rule will be used to specify the animation code. By gradually switching from one set of CSS styles to another, the animation is produced. A variety of CSS styles can be changed throughout the animation. Indicate the percentage change in style, or use the phrases "from" and "to," which are equivalent to 0% and 100%. 0% indicates the start of the animation and 100% indicates its conclusion.

.add-to-cart-box {
  height: 5px;
  position: absolute;
  top: 0;
  width: 5px;
}
.box-1, .box-2 {
  transition: 0.4s ease;
  top: -8px;
}
.box-1 {
  left: 23px;
  transform: rotate(45deg);
}
.box-2 {
  left: 32px;
  transform: rotate(63deg);
}
.cart-icon {
  left: 15px;
  position: absolute;
  top: 8px;
}
.tick {
  background: #146230;
  border-radius: 50%;
  position: absolute;
  left: 28px;
  transform: scale(0);
  top: 5px;
  z-index: 2;
}
@-webkit-keyframes grow {
  0% {
    -webkit-transform: scale(0);
 }
  50% {
    -webkit-transform: scale(1.2);
 }
  100% {
    -webkit-transform: scale(1);
 }
}
@keyframes grow {
  0% {
    transform: scale(0);
 }
  50% {
    transform: scale(1.2);
 }
  100% {
    transform: scale(1);
 }
}
@-webkit-keyframes drop {
  0% {
    -webkit-transform: translateY(0px);
 }
  100% {
    -webkit-transform: translateY(1px);
 }
}
@keyframes drop {
  0% {
    transform: translateY(0px);
 }
  100% {
    transform: translateY(1px);
 }
}

Although the layout for our add-to-cart button has now been implemented, the animation won't begin until we add some javascript functionality.

Step3: Adding Javascript Code

addToCartButton = document.querySelectorAll(".add-to-cart-button");

document.querySelectorAll('.add-to-cart-button').forEach(function(addToCartButton) {
    addToCartButton.addEventListener('click', function() {
        addToCartButton.classList.add('added');
        setTimeout(function(){
            addToCartButton.classList.remove('added');
        }, 2000);
    });
});

The "add-to-cart-button" class will be selected using document.querySelectorAll, method and an event listener will be added to the button using the function for each element. When users click the button, the "added" class, which is defined in our CSS, will be added to the button. We will deactivate our class after 2000 miliseconds by using the SetTimeout() method.

The project is now finished, we have completed Add To Cart Button Animation using HMTL ,CSS and Javascript. Now look at the live preview.

Now We have Successfully created our Add To Cart Button Animation using HTML , CSS & Javascript. You can use this project directly by copying into your IDE. WE hope you understood the project , If you any doubt feel free to comment!!

We have built an e-commerce website so you can use your technical know-how to add this add-to-cart animation to your e-commerce website if you want to. Visit our e-commerce site, which was developed with the help of HTML, CSS, and JavaScript.

If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

follow : codewithrandom

Written By : arun

Code by : Arun

Blog

Create "Add To Cart" Button Using HTML , CSS & Javascript

Codewithrandom Blogs

Step1: Adding Some Basic HTML

Step2: Adding CSS

Step3: Adding Javascript Code

Join Our Newsletter. No Spam, Only the good stuff.

Related