HomeJavascriptResponsive Pricing Cards with Hover Effect Using HTML and CSS

Responsive Pricing Cards with Hover Effect Using HTML and CSS

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;
}

 

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

five × four =

Most Popular