" Bootstrap 5 ecommerce product list with animation add to cart button"
Bootstrap 4.1.1 Snippet by Umerfarooq

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="wrapper">
<div class="container">
<div class="row g-1">
<div class="col-md-3">
<div class="card p-3">
<div class="text-center"> <img src="https://i.imgur.com/w2rCsEw.jpg" width="200"> </div>
<div class="product-details"> <span class="font-weight-bold d-block">$ 7.00</span> <span>Red Redish</span>
<div class="buttons d-flex flex-row">
<div class="cart"><i class="fa fa-shopping-cart"></i></div> <button class="btn btn-success cart-button btn-block"><span class="dot">1</span>Add to cart </button>
</div>
<div class="weight"> <small>1 piece 2.5kg</small> </div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card p-3">
<div class="text-center"> <img src="https://i.imgur.com/ZRUetRF.jpg" width="200"> </div>
<div class="product-details"> <span class="font-weight-bold d-block">$ 7.00</span> <span>Red Redish</span>
<div class="buttons d-flex flex-row">
<div class="cart"><i class="fa fa-shopping-cart"></i></div> <button class="btn btn-success cart-button btn-block"><span class="dot">1</span>Add to cart </button>
</div>
<div class="weight"> <small>1 piece 2.5kg</small> </div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card p-3">
<div class="text-center"> <img src="https://i.imgur.com/0M7pldG.jpg" width="200"> </div>
<div class="product-details"> <span class="font-weight-bold d-block">$ 7.00</span> <span>Red Redish</span>
<div class="buttons d-flex flex-row">
<div class="cart"><i class="fa fa-shopping-cart"></i></div> <button class="btn btn-success cart-button btn-block"><span class="dot">1</span>Add to cart </button>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body {
background: #eee
}
.wrapper {
margin-top: 30px
}
.card {
border: 1px solid #eee;
cursor: pointer
}
.weight {
margin-top: -65px;
transition: all 0.5s
}
.weight small {
color: #e2dede
}
.buttons {
padding: 10px;
background-color: #d6d4d44f;
border-radius: 4px;
position: relative;
margin-top: 7px;
opacity: 0;
transition: all 0.8s
}
.dot {
height: 14px;
width: 14px;
background-color: green;
border-radius: 50%;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
document.addEventListener("DOMContentLoaded", function(event) {
const cartButtons = document.querySelectorAll('.cart-button');
cartButtons.forEach(button => {
button.addEventListener('click',cartClick);
});
function cartClick(){
let button =this;
button.classList.add('clicked');
}
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Get Shit Done Kit
Ripple Dot Animation
Success and Error Icon Animation
Bootstrap4 navigation border animation

Questions / Comments:

I like it, but what if the product description is longer? Like say the second one is for argument's sake, Corn on the Cob, 2 dozen and a half. That makes the card longer and the others don't stretch to match.

Mel250 () - 2 years ago - Reply 0

I like it, but what if the product description is longer? Like say the second one is for argument's sake, Corn on the Cob, 2 dozen and a half. That makes the card longer and the others don't stretch to match.

Mel250 () - 2 years ago - Reply 0

I like it, but what if the product description is longer? Like say the second one is for argument's sake, Corn on the Cob, 2 dozen and a half. That makes the card longer and the others don't stretch to match.

Mel250 () - 2 years ago - Reply 0