Creating clean, visually appealing pricing sections is essential for modern websites, especially those offering digital products or subscription services. In this tutorial, we’ll explore how to build a beautiful and interactive pricing card layout using just HTML and CSS—no JavaScript required!
HTML Structure:
The HTML sets up a section containing three pricing cards: Basic, Pro, and Premium. Each card is wrapped inside a <div> with the class pricing-card, and contains a plan name, price, a list of features, and a call-to-action button. The “Pro” card stands out with an additional featured class, giving it special styling.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Pricing Cards With Hover Effect</title>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;600&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<section class="pricing-section">
<div class="pricing-card">
<h3>Basic</h3>
<h2>$9<span>/mo</span></h2>
<ul>
<li>1 Website</li>
<li>10GB Storage</li>
<li>Email Support</li>
</ul>
<button>Choose Plan</button>
</div>
<div class="pricing-card featured">
<h3>Pro</h3>
<h2>$29<span>/mo</span></h2>
<ul>
<li>5 Websites</li>
<li>50GB Storage</li>
<li>Priority Support</li>
</ul>
<button>Choose Plan</button>
</div>
<div class="pricing-card">
<h3>Premium</h3>
<h2>$49<span>/mo</span></h2>
<ul>
<li>Unlimited Websites</li>
<li>200GB Storage</li>
<li>24/7 Support</li>
</ul>
<button>Choose Plan</button>
</div>
</section>
</body>
</html>
CSS Styling:
The CSS brings the cards to life with a modern and clean design. The cards are styled with rounded corners, shadows, and centered content to keep everything neat and readable. The .pricing-section uses flexbox to align the cards in a row with spacing and wraps them on smaller screens.
Each card features a soft hover animation using transform: scale(1.05) that slightly enlarges the card to create a responsive, interactive feel. The background color also changes on hover to improve visual feedback.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: "Poppins", sans-serif;
background: #f2f2f2;
padding: 50px;
display: flex;
justify-content: center;
}
.pricing-section {
display: flex;
gap: 30px;
flex-wrap: wrap;
}
.pricing-card {
background-color: #ffffff;
padding: 30px;
border-radius: 15px;
width: 280px;
text-align: center;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, background 0.3s ease;
cursor: pointer;
}
.pricing-card:hover {
transform: scale(1.05);
background: #f0f8ff;
}
.pricing-card h3 {
font-weight: 600;
font-size: 1.4rem;
color: #333333;
margin-bottom: 10px;
}
.pricing-card h2 {
font-size: 2rem;
color: #0077ff;
margin-bottom: 20px;
}
.pricing-card h2 span {
font-size: 0.9rem;
color: #666666;
}
.pricing-card ul {
list-style: none;
margin-bottom: 20px;
}
.pricing-card ul li {
margin: 10px 0;
color: #444444;
}
.pricing-card button {
background-color: #0077ff;
color: #ffffff;
border: none;
padding: 12px 25px;
border-radius: 8px;
font-size: 1rem;
transition: background 0.3 ease;
}
.pricing-card button:hover {
background: #005ecb;
}
.featured {
border: 2px solid #0077ff;
}
Â
