Add to Cart Button HTML – With Source Code

1
Add to Cart Button HTML
Add to Cart Button HTML

Hey friends, Welcome to CodeWithNepal today in this blog you’ll learn how to make Add to Cart Button in HTML. There are a few different ones of cart buttons out there, but we are going to make our own simple Add to Cart Button HTML from scratch. In the earlier blog, I shared how to make a Simple Login Form in HTML, which I recommend you to watch.

About Add to Cart Button

Add to cart button is an important part of online shopping as it allows customers to add items to their shopping cart. By adding a button to your website, you can make it easier for customers to shop for items they are interested in and make it more likely that they will complete a purchase.

There are a few things to keep in mind when designing an Add to cart button:

Make sure the button is visible and easy to find.

Consider the colour of the button – it should contrast with the rest of the website so that it stands out.

Use an action word like “add” or “buy” so that customers know what the button does.

Make sure the button is clickable – it should be large enough and have enough space around it so that it can be clicked easily.

Consider the placement of the button – it should be placed near the items it applies to so that customers can easily find it.

Add-to-cart buttons are an important criterion of e-commerce websites.

Introduction of Add to cart button

If you’re looking to add a “add to cart” button to your HTML, there are a few things you’ll need to do. First, you’ll need to create a button element: Add to Cart

Next, you’ll need to add some CSS to style the button. For this example, we’ll make the button green and give it some padding:

button {
background-color: green;
padding: 10px;
}

Finally, you’ll need to add an onclick event handler to the button. This will execute a function that will add the item to the cart.

And that’s it! Now you have a functioning “add to cart” button that you can use on your website.

You might like this:

Add to Cart Button HTML [ Source Code ]

Step 1

Initially you need to create three files HTML (.html) CSS (.css) JS (.js) . After creating these files, just paste the following codes into your VS IDE code sample create an HTML file called index.html and paste the indicated codes into your HTML file (.html) Remember, you must create a file with the extension. HTML.

 <!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="style.css" />  
  </head>  
  <body> 
<button class="addtocart">
  <div class="pretext">
    <i class="fas fa-cart-plus"></i> ADD TO CART
  </div>
  
  <div class="pretext done">
    <div class="posttext"><i class="fas fa-check"></i> ADDED</div>
  </div>
  
</button>
     
  <script src="script.js"></script>  
  </body>  
 </html>  

Step 2

And, create a CSS file named style.css and paste the indicated codes into your CSS file. Remember, you must create a .css file.

* {
  box-sizing: border-box;
  outline: none;
}
body,
html {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-color: #3F00FF;
  background-attachment: fixed;
}
.fa-cart-plus {
  background: #0652dd;
}

.addtocart {
  display: block;
  padding: 0.5em 1em 0.5em 1em;
  border-radius: 100px;
  border: none;
  font-size: 2em;
  position: relative;
  background: #0000cd;
  cursor: pointer;
  height: 2em;
  width: 10em;
  overflow: hidden;
  transition: transform 0.1s;
  z-index: 1;
}
.addtocart:hover {
  transform: scale(1.1);
}
.pretext {
  color: #fff;
  background: #0000cd;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Quicksand", sans-serif;
}
i {
  margin-right: 10px;
}
.done {
  background: #be2edd;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  transition: transform 0.3s ease;

  transform: translate(-110%) skew(-40deg);
}
.posttext {
  background: #be2edd;
}
.fa-check {
  background: #be2edd;
}

Step 3

Third, create a JavaScript file with the name script.js and paste the given codes into your JavaScript file. Remember, you’ve to create a file with a .js extension. We’ll store random word details as an object in this file.

const button = document.querySelector(".addtocart");
const done = document.querySelector(".done");
console.log(button);
let added = false;
button.addEventListener('click',()=>{
  if(added){
    done.style.transform = "translate(-110%) skew(-40deg)";
    added = false;
  }
  else{
    done.style.transform = "translate(0px)";
    added = true;
  }
    
});

Preview of Add to Cart Button in HTML

Add to Cart Button HTML
Add to Cart Button HTML

That’s all, now you’ve successfully built Add to Cart Button in HTML. If your code doesn’t work or you’ve faced any problems, please free to comment down I will provide the source code files.

1 COMMENT

LEAVE A REPLY

Please enter your comment!
Please enter your name here