This HTML code creates a simple webpage featuring a series of Add to Cart buttons with various animation effects applied to them. The code includes several components: HTML structure, embedded CSS for styling, and icons from Font Awesome. The webpage is set to be responsive with a viewport meta tag, making it suitable for mobile devices.
Add-to-cart Buttons
<!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 Buttons</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-wrap: wrap;
gap: 20px;
padding: 20px;
background-color: #f9f9f9;
}
.button-container {
display: flex;
flex-direction: column;
align-items: center;
}
button {
padding: 10px 20px;
font-size: 16px;
border: none;
cursor: pointer;
border-radius: 5px;
display: flex;
align-items: center;
gap: 10px;
position: relative;
}
i {
font-size: 18px;
}
/* 1. Basic Scale Animation */
.btn-scale {
background: #4CAF50;
color: white;
transition: transform 0.2s ease;
}
.btn-scale:hover {
transform: scale(1.1);
}
/* 2. Ripple Effect */
.btn-ripple {
position: relative;
overflow: hidden;
background: #008CBA;
color: white;
}
.btn-ripple::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.5);
top: 0;
left: -100%;
transition: left 0.3s ease;
}
.btn-ripple:hover::after {
left: 0;
}
/* 3. Rotate on Hover */
.btn-rotate {
background: #FF5722;
color: white;
transition: transform 0.4s ease;
}
.btn-rotate:hover i {
transform: rotate(360deg);
}
/* 4. Expand and Shrink */
.btn-expand {
background: #673AB7;
color: white;
transition: transform 0.2s ease;
}
.btn-expand:hover {
transform: scale(1.2);
}
/* 5. Bounce Animation */
.btn-bounce {
background: #FFEB3B;
color: black;
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
/* 6. Slide Effect */
.btn-slide {
position: relative;
background: #00BCD4;
color: white;
overflow: hidden;
transition: 0.4s;
}
.btn-slide:hover {
color: #00BCD4;
}
.btn-slide:before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: white;
z-index: 0;
transition: 0.4s;
}
.btn-slide:hover:before {
left: 0;
}
/* 7. Glow Animation */
.btn-glow {
background: #E91E63;
color: white;
box-shadow: 0 0 5px #E91E63;
transition: box-shadow 0.3s ease;
}
.btn-glow:hover {
box-shadow: 0 0 20px #E91E63;
}
/* 8. Icon Flip */
.btn-flip {
background: #3F51B5;
color: white;
}
.btn-flip:hover i {
transform: scale(1.5) rotateY(180deg);
transition: transform 0.5s;
}
/* 9. Border Animation */
.btn-border {
background: white;
color: #9C27B0;
border: 2px solid #9C27B0;
overflow: hidden;
position: relative;
}
.btn-border:hover {
color: white;
}
.btn-border:before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: #9C27B0;
color:#fff !important;
z-index: 0;
transition: left 0.3s ease;
}
.btn-border:hover:before {
left: 0;
}
</style>
</head>
<body>
<div class="button-container">
<button class="btn-scale"><i class="fas fa-cart-plus"></i>Add to Cart</button>
</div>
<div class="button-container">
<button class="btn-ripple"><i class="fas fa-cart-plus"></i>Add to Cart</button>
</div>
<div class="button-container">
<button class="btn-rotate"><i class="fas fa-cart-plus"></i>Add to Cart</button>
</div>
<div class="button-container">
<button class="btn-expand"><i class="fas fa-cart-plus"></i>Add to Cart</button>
</div>
<div class="button-container">
<button class="btn-bounce"><i class="fas fa-cart-plus"></i>Add to Cart</button>
</div>
<div class="button-container">
<button class="btn-slide"><i class="fas fa-cart-plus"></i>Add to Cart</button>
</div>
<div class="button-container">
<button class="btn-glow"><i class="fas fa-cart-plus"></i>Add to Cart</button>
</div>
<div class="button-container">
<button class="btn-flip"><i class="fas fa-cart-plus"></i>Add to Cart</button>
</div>
<div class="button-container">
<button class="btn-border"><i class="fas fa-cart-plus"></i>Add to Cart</button>
</div>
</body>
</html>
The body of the page is styled with a flexbox layout to arrange the buttons in a row, allowing them to wrap onto new lines as necessary. Each button is placed inside a `.button-container`, which is also styled with flexbox to center its contents. The buttons are designed with various visual effects using CSS transitions and animations. These effects include:
- Scale Effect: Buttons grow slightly when hovered over using the `.btn-scale` class, achieved by applying a `scale(1.1)` transform.
- Ripple Effect: The `.btn-ripple` class creates a ripple effect that starts from the button when hovered.
- Rotate on Hover: The `.btn-rotate` class applies a 360-degree rotation to the icon inside the button when hovered.
- Expand Effect: The `.btn-expand` class causes the button to slightly enlarge when hovered, using the `scale(1.2)` transform.
- Bounce Animation: The `.btn-bounce` class gives the button a bouncing effect, which repeats infinitely using the `@keyframes` rule.
- Slide Effect: The `.btn-slide` class uses an animated sliding effect, where a white background slides from left to right when the button is hovered.
- Glow Effect: The `.btn-glow` class adds a glowing effect around the button, intensifying when hovered.
- Flip Effect: The `.btn-flip` class causes the icon inside the button to flip 180 degrees along the Y-axis when hovered.
- Border Animation: The `.btn-border` class creates an animation where a purple background slides into view from the left when the button is hovered.
Each button is styled with a unique background color and icon, using Font Awesome's cart-plus icon, making the buttons both functional and visually appealing. This setup allows for different interactions, providing a dynamic user experience. The CSS transitions and animations are smoothly timed to create engaging button effects when users interact with them.