Create Add To Cart Button Using HTML, CSS, & JavaScript
The "Add to Cart" button is a common feature on e-commerce websites that allows users to add products to their online shopping cart. When a user clicks on the "Add to Cart" button, the selected product is added to the user's virtual cart or basket, and the user can continue shopping for other items or proceed to checkout.
The "Add to Cart" button is typically located next to the product image or product description on the product page. It may also appear on search results or category pages, allowing users to add products to their cart without having to navigate to the product page.
The "Add to Cart" button is a crucial component of the online shopping experience as it makes it easy for customers to purchase products with just one click. It also helps to increase the likelihood of customers completing their purchase by streamlining the checkout process.
To get started with this project all you need is a basic understanding of HTML, CSS(SCSS), and Javascript.
In this tutorial, we will guide you on how to create an "Add to Cart" button using HTML, CSS, and JavaScript. You can easily implement this feature in your website or project by copying and pasting the complete source code provided. With our step-by-step instructions, you'll be able to customize the button's design and functionality to suit your needs.
Here is the HTML code for an "Add to Cart" button that you can use in your website or project:
<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>
You can customize the appearance of the button using CSS styles. Additionally, you can add JavaScript code to handle the functionality of the button, such as adding the selected product to the user's cart. By using this HTML code, you can easily create an "Add to Cart" button.
To enhance the appearance of our project, we are utilizing SCSS, a more advanced version of CSS. SCSS offers an extensive range of features beyond what is available in standard CSS. Despite its expanded capabilities, it still employs comparable syntax to CSS, which simplifies the learning process. By incorporating SCSS into our project, we can create more visually appealing and dynamic designs.
Here is the CSS code for an "Add to Cart" button that you can use in your website or project:
.add-to-cart-button {
background: #e6a247;
border: none;
border-radius: 4px;
-webkit-box-shadow: 0 3px 13px -2px rgba(0, 0, 0, 0.15);
box-shadow: 0 3px 13px -2px rgba(0, 0, 0, 0.15);
color: #ffffff;
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, 0.45);
box-shadow: 0 0 0 0.2rem rgba(252, 186, 3, 0.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, 0.45);
box-shadow: 0 0 0 0.2rem rgba(252, 186, 3, 0.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%;
}
Here is the Javascript code for an "Add to Cart" button that you can use in your website or project:
To create a pop-up display that shows "added to cart" when a user clicks the "Add to Cart" button, we need to add some JavaScript code. We can use the setTimeout() function to delay the execution of our code for a certain period of time after the user clicks the button.
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);
});
});
Output of an "Add to Cart" Button:
