<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<div class="cart-icon">
<ion-icon name="cart-outline"></ion-icon>
<div class="cart-badge">0</div>
</div>
<div class="wrapper">
<div class="page-header">
<h1>Add to Cart Animations</h1>
<p>Pure HTML & CSS button animations - hover to see effects!</p>
</div>
<div class="products-grid">
<!-- Product 1: Bounce Animation -->
<div class="product-card">
<div class="product-image">
<ion-icon name="laptop-outline"></ion-icon>
<span class="badge">NEW</span>
</div>
<div class="product-info">
<h3 class="product-title">Premium Laptop</h3>
<p class="product-description">High-performance laptop with stunning display and powerful processor.</p>
<div class="product-price">$1,299</div>
<button class="add-to-cart-btn-1">
<ion-icon name="cart-outline"></ion-icon>
Add to Cart - Bounce
</button>
</div>
</div>
<!-- Product 2: Scale Pulse -->
<div class="product-card">
<div class="product-image">
<ion-icon name="headset-outline"></ion-icon>
<span class="badge">SALE</span>
</div>
<div class="product-info">
<h3 class="product-title">Wireless Headphones</h3>
<p class="product-description">Premium sound quality with active noise cancellation technology.</p>
<div class="product-price">$299</div>
<button class="add-to-cart-btn-2">
<ion-icon name="cart-outline"></ion-icon>
Add to Cart - Pulse
</button>
</div>
</div>
<!-- Product 3: Slide Checkmark -->
<div class="product-card">
<div class="product-image">
<ion-icon name="watch-outline"></ion-icon>
<span class="badge">HOT</span>
</div>
<div class="product-info">
<h3 class="product-title">Smart Watch</h3>
<p class="product-description">Track your fitness goals with this advanced smartwatch.</p>
<div class="product-price">$399</div>
<button class="add-to-cart-btn-3">
<ion-icon name="cart-outline"></ion-icon>
Add to Cart - Slide
</button>
</div>
</div>
<!-- Product 4: Rotating Cart -->
<div class="product-card">
<div class="product-image">
<ion-icon name="phone-portrait-outline"></ion-icon>
<span class="badge">BEST</span>
</div>
<div class="product-info">
<h3 class="product-title">Smartphone Pro</h3>
<p class="product-description">Latest flagship phone with advanced camera system.</p>
<div class="product-price">$999</div>
<button class="add-to-cart-btn-4">
<ion-icon name="cart-outline"></ion-icon>
Add to Cart - Rotate
</button>
</div>
</div>
<!-- Product 5: Flying Item -->
<div class="product-card">
<div class="product-image">
<ion-icon name="camera-outline"></ion-icon>
<span class="badge">4K</span>
</div>
<div class="product-info">
<h3 class="product-title">Digital Camera</h3>
<p class="product-description">Professional mirrorless camera for stunning photography.</p>
<div class="product-price">$1,799</div>
<button class="add-to-cart-btn-5">
<ion-icon name="cart-outline"></ion-icon>
Add to Cart - Fly
</button>
</div>
</div>
<!-- Product 6: Ripple Effect -->
<div class="product-card">
<div class="product-image">
<ion-icon name="game-controller-outline"></ion-icon>
<span class="badge">TOP</span>
</div>
<div class="product-info">
<h3 class="product-title">Gaming Console</h3>
<p class="product-description">Next-gen gaming console with immersive gameplay experience.</p>
<div class="product-price">$499</div>
<button class="add-to-cart-btn-6">
<ion-icon name="cart-outline"></ion-icon>
Add to Cart - Ripple
</button>
</div>
</div>
</div>
<div class="info-section">
<h2>
<ion-icon name="information-circle-outline"></ion-icon>
Animation Styles Explained
</h2>
<div class="info-grid">
<div class="info-card">
<h3>🎾 Bounce Animation</h3>
<p>Button bounces up and down creating a playful, energetic effect perfect for casual shopping sites.</p>
</div>
<div class="info-card">
<h3>💫 Scale Pulse</h3>
<p>Button gently scales up and down, creating a pulsing effect that draws attention without being overwhelming.</p>
</div>
<div class="info-card">
<h3>✅ Slide Checkmark</h3>
<p>A checkmark slides in from the left, providing visual confirmation of the add-to-cart action.</p>
</div>
<div class="info-card">
<h3>🔄 Rotating Cart</h3>
<p>The cart icon rotates back and forth, mimicking the action of tossing an item into a shopping cart.</p>
</div>
<div class="info-card">
<h3>🚀 Flying Item</h3>
<p>A "+1" indicator flies upward, showing that an item has been successfully added to the cart.</p>
</div>
<div class="info-card">
<h3>💧 Ripple Effect</h3>
<p>A circular wave ripples outward from the center, creating a modern material design effect.</p>
</div>
</div>
</div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
background: linear-gradient(135deg, #0093E9 0%, #80D0C7 100%);
min-height: 100vh;
padding: 40px 20px;
}
.wrapper {
max-width: 1400px;
margin: 0 auto;
}
.page-header {
text-align: center;
color: white;
margin-bottom: 40px;
}
.page-header h1 {
font-size: 36px;
margin-bottom: 10px;
}
.page-header p {
font-size: 16px;
opacity: 0.9;
}
.products-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
/* Product Card */
.product-card {
background: white;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
transition: transform 0.3s ease;
position: relative;
}
.product-card:hover {
transform: translateY(-5px);
}
.product-image {
width: 100%;
height: 250px;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.product-image ion-icon {
font-size: 100px;
color: #0093E9;
opacity: 0.3;
}
.badge {
position: absolute;
top: 15px;
right: 15px;
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
color: white;
padding: 8px 16px;
border-radius: 50px;
font-size: 12px;
font-weight: 700;
}
.product-info {
padding: 25px;
}
.product-title {
font-size: 20px;
color: #333;
margin-bottom: 10px;
font-weight: 600;
}
.product-description {
font-size: 14px;
color: #666;
margin-bottom: 15px;
line-height: 1.6;
}
.product-price {
font-size: 28px;
color: #0093E9;
font-weight: 700;
margin-bottom: 20px;
}
/* Animation Style 1: Bounce */
.add-to-cart-btn-1 {
width: 100%;
padding: 14px;
border: none;
border-radius: 12px;
background: linear-gradient(135deg, #0093E9 0%, #80D0C7 100%);
color: white;
font-size: 16px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.add-to-cart-btn-1:hover {
animation: bounce 0.6s ease;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
25% { transform: translateY(-10px); }
50% { transform: translateY(0); }
75% { transform: translateY(-5px); }
}
/* Animation Style 2: Scale Pulse */
.add-to-cart-btn-2 {
width: 100%;
padding: 14px;
border: none;
border-radius: 12px;
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
color: white;
font-size: 16px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
transition: all 0.3s ease;
}
.add-to-cart-btn-2:hover {
animation: scalePulse 0.5s ease;
}
@keyframes scalePulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
/* Animation Style 3: Slide with Checkmark */
.add-to-cart-btn-3 {
width: 100%;
padding: 14px;
border: none;
border-radius: 12px;
background: linear-gradient(135deg, #56ab2f 0%, #a8e063 100%);
color: white;
font-size: 16px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.add-to-cart-btn-3::before {
content: '✓';
position: absolute;
left: -50px;
font-size: 20px;
transition: left 0.5s ease;
}
.add-to-cart-btn-3:hover::before {
left: 20px;
}
.add-to-cart-btn-3:hover {
padding-left: 50px;
}
/* Animation Style 4: Rotating Cart */
.add-to-cart-btn-4 {
width: 100%;
padding: 14px;
border: none;
border-radius: 12px;
background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%);
color: white;
font-size: 16px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
transition: all 0.3s ease;
}
.add-to-cart-btn-4:hover ion-icon {
animation: rotateCart 0.6s ease;
}
@keyframes rotateCart {
0% { transform: rotate(0deg); }
25% { transform: rotate(-15deg); }
50% { transform: rotate(15deg); }
75% { transform: rotate(-10deg); }
100% { transform: rotate(0deg); }
}
/* Animation Style 5: Flying Item */
.add-to-cart-btn-5 {
width: 100%;
padding: 14px;
border: none;
border-radius: 12px;
background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
color: white;
font-size: 16px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
transition: all 0.3s ease;
position: relative;
overflow: visible;
}
.add-to-cart-btn-5:hover::after {
content: '+1';
position: absolute;
top: -30px;
right: 20px;
font-size: 20px;
font-weight: 700;
animation: flyUp 1s ease forwards;
}
@keyframes flyUp {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-40px);
}
}
/* Animation Style 6: Ripple Effect */
.add-to-cart-btn-6 {
width: 100%;
padding: 14px;
border: none;
border-radius: 12px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
font-size: 16px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.add-to-cart-btn-6::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
transform: translate(-50%, -50%);
}
.add-to-cart-btn-6:hover::before {
animation: ripple 0.8s ease;
}
@keyframes ripple {
0% {
width: 0;
height: 0;
opacity: 1;
}
100% {
width: 300px;
height: 300px;
opacity: 0;
}
}
/* Cart Counter */
.cart-icon {
position: fixed;
top: 30px;
right: 30px;
background: white;
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
z-index: 1000;
}
.cart-icon ion-icon {
font-size: 32px;
color: #0093E9;
}
.cart-badge {
position: absolute;
top: -5px;
right: -5px;
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
color: white;
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
animation: popIn 0.3s ease;
}
@keyframes popIn {
0% {
transform: scale(0);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
.info-section {
background: white;
border-radius: 20px;
padding: 30px;
margin-top: 40px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}
.info-section h2 {
font-size: 24px;
color: #0093E9;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}
.info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.info-card {
background: #f8f9fa;
padding: 20px;
border-radius: 12px;
border-left: 4px solid #0093E9;
}
.info-card h3 {
font-size: 16px;
color: #333;
margin-bottom: 8px;
}
.info-card p {
font-size: 14px;
color: #666;
line-height: 1.6;
}
@media (max-width: 768px) {
.page-header h1 {
font-size: 28px;
}
.products-grid {
grid-template-columns: 1fr;
}
.cart-icon {
width: 50px;
height: 50px;
top: 20px;
right: 20px;
}
.cart-icon ion-icon {
font-size: 26px;
}
}
No comments yet. Be the first!