Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create a product card with CSS?
On an E-commerce website, you must have seen product cards for specific products. It includes the product name, image, price, any discount, etc. On a web page, we can easily create a product card with CSS. With that, the Buy Now or Add to Cart button is also placed on this card so it's easier for users to directly buy.
Syntax
.productCard {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: width-value;
margin: auto;
text-align: center;
font-family: font-name;
}
Set the div for the card
Under the div for the product card, set the product image and the product name as a heading. Rest, place the product details and price in the paragraph. Also, the buy button is set using the <button> element −
<div class="productCard"> <img src="/images/leather-bag.jpg" style="width:100%"/> <h1>Leather Bag</h1> <p class="productDetails">Exotic Quality</p> <p>Price $50</p> <p><button>Buy Now</button></p> </div>
Style the card
To style the product card, set the maximum width using the max-width property. Align the text of the card in the center using the text-align property. Also, set the box shadow −
.productCard {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
font-family: Arial, sans-serif;
background-color: #bee0e0;
border-radius: 8px;
overflow: hidden;
}
Product Card Details
Give a different look to the details to make it look more appealing. Font style can be set with the font-weight property −
.productDetails {
color: #1a0033;
font-weight: bold;
font-size: 18px;
margin: 10px 0;
}
Display the button
The button on the product card is displayed using the display property with the value inline-block. Set the cursor property to pointer to make the cursor look clickable −
button {
border: none;
outline: 0;
display: inline-block;
padding: 12px;
color: white;
background-color: #171f66;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
transition: opacity 0.3s;
}
button:hover {
opacity: 0.7;
}
Example
The following example demonstrates how to create a complete product card with CSS −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
background-color: #f5f5f5;
padding: 20px;
}
.productCard {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
font-family: Arial, sans-serif;
background-color: #bee0e0;
border-radius: 8px;
overflow: hidden;
padding-bottom: 15px;
}
.productCard img {
width: 100%;
height: 200px;
object-fit: cover;
}
.productCard h1 {
margin: 15px 0 10px;
color: #333;
}
.productDetails {
color: #1a0033;
font-weight: bold;
font-size: 18px;
margin: 10px 0;
}
.price {
font-size: 20px;
color: #2c5f2d;
font-weight: bold;
margin: 15px 0;
}
button {
border: none;
outline: 0;
display: inline-block;
padding: 12px;
color: white;
background-color: #171f66;
text-align: center;
cursor: pointer;
width: 90%;
font-size: 18px;
border-radius: 5px;
transition: opacity 0.3s;
}
button:hover {
opacity: 0.7;
}
</style>
</head>
<body>
<h2 style="text-align:center">Product Card Example</h2>
<div class="productCard">
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjMwMCIgaGVpZ2h0PSIyMDAiIGZpbGw9IiNkNGVkZGEiLz4KPHJlY3QgeD0iNzAiIHk9IjUwIiB3aWR0aD0iMTYwIiBoZWlnaHQ9IjEwMCIgcng9IjEwIiBmaWxsPSIjOGQ2ZTYzIi8+CjxjaXJjbGUgY3g9IjE4MCIgY3k9IjcwIiByPSI4IiBmaWxsPSIjNjY0ZjQ3Ii8+Cjx0ZXh0IHg9IjE1MCIgeT0iMTg1IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMTQiIGZpbGw9IiM2NjY2NjYiPkxlYXRoZXIgQmFnPC90ZXh0Pgo8L3N2Zz4K" alt="Leather Bag"/>
<h1>Leather Bag</h1>
<p class="productDetails">Premium Quality</p>
<p class="price">$50</p>
<button>Buy Now</button>
</div>
</body>
</html>
A centered product card appears with a light blue background, showing a leather bag image, product name "Leather Bag", quality description, price "$50", and a dark blue "Buy Now" button. The card has rounded corners and a subtle shadow effect. When hovering over the button, it becomes slightly transparent.
Conclusion
Creating a product card with CSS involves structuring the HTML with image, title, details, and button elements, then styling them with properties like box-shadow, max-width, and proper spacing. The key is to make it visually appealing and user-friendly with hover effects and proper typography.
1K+ Views
