Project 3: Animated Pricing Table0%

Project 3: Animated Pricing Table

Intermediate16 min read•Updated: 2026-09-10

Project 3: Animated Pricing Table

Whether you are signing up for an online video streaming service or choosing a classroom tuition package at a premier coaching institute, you have seen a Pricing Table. A great pricing table is not just a lifeless list of numbers—it is an interactive, psychology-driven interface that clearly highlights the most popular tier, rewards user hover with satisfying micro-interactions, and adapts smoothly to any screen size.

In this capstone project for Intermediate CSS, we will combine Flexbox, CSS Variables, Transitions, Transforms, Pseudo-elements, and Box-Shadows to build an animated, commercial-quality Course Tuition Pricing Table.

1. Project Blueprint and Visual Hierarchy

A successful pricing table directs the student's eyes immediately to the best value option. Here is the architectural layout:

Visual Architecture Blueprint

+-------------------------------------------------------------------------+
|                  PRICING TABLE ARCHITECTURE & INTERACTION               |
+-------------------------------------------------------------------------+

              [SECTION HEADER: Choose Your Learning Track]
              
                 [TOGGLE PILL: (o) Monthly  |  ( ) Annual (Save 20%)]
                                     |
                                     v
   +--------------------+  +--------------------+  +--------------------+
   | TIER 1: FOUNDATION |  | TIER 2: PRO (HERO) |  | TIER 3: MASTER     |
   |                    |  |                    |  |                    |
   |                    |  | [POPULAR BADGE]    |  |                    |
   | Rs 1,499 / mo      |  | Rs 2,999 / mo      |  | Rs 4,999 / mo      |
   |                    |  |                    |  |                    |
   | - Recorded Lectures|  | - Recorded + LIVE  |  | - Everything in Pro|
   | - Weekly Quizzes   |  | - 1-on-1 Mentorship|  | - Personal Coach   |
   | - Standard Notes   |  | - All Test Series  |  | - Physical Books   |
   |                    |  |                    |  |                    |
   | [Select Plan]      |  | [JOIN PRO TRACK]   |  | [Select Plan]      |
   +--------------------+  +--------------------+  +--------------------+
     (Base Elevation)       (Pre-scaled 1.05x,      (Base Elevation)
                             Emerald Border,
                             Multi-layered Glow)
                                     |
               [HOVER EFFECT: Cards lift translateY(-8px)]

2. Key CSS Techniques Showcased

1
Visual Hierarchy & Middle Card Elevation: Scaling the popular tier (transform: scale(1.05)) so it physically stands out even before the user hovers.
2
"Most Popular" Ribbon with Absolute Positioning: Crafting a badge that overlaps the top border using position: absolute; top: -14px; left: 50%; transform: translateX(-50%);.
3
Smooth Micro-Interactions: Combining transition: transform 0.3s ease, box-shadow 0.3s ease; with subtle lift (translateY(-8px)).
4
CSS Feature Checkmarks: Styling custom green checkmarks and disabled strikethroughs using CSS pseudo-elements (::before).
5
Interactive Toggle Switch: Building a pure CSS monthly/annual pill toggle using an invisible <input type="checkbox"> and the adjacent sibling selector (+ .toggle-slider).

3. Step-by-Step Construction

Step 1: The Design Tokens & Base Theme

We define our primary indigo brand color, vibrant emerald for the recommended package, neutral card backgrounds, and easing speeds:

root {
--brand-primary: #4338ca;
--brand-gradient: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
--badge-emerald: #059669;
--text-main: #0f172a;
--text-muted: #64748b;
--bg-stage: #f8fafc;
--bg-card: #ffffff;
--border-card: #e2e8f0;
--radius-card: 20px;
--shadow-default: 0 4px 14px rgba(15, 23, 42, 0.06);
--shadow-lift: 0 20px 35px -8px rgba(79, 70, 229, 0.2);
--trans-smooth: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
14}

Step 2: Flexbox Card Container

The container uses display: flex with align-items: center so the non-featured cards sit comfortably while the featured card can naturally expand taller:

pricing-deck {
display: flex;
justify-content: center;
align-items: center;
gap: 28px;
flex-wrap: wrap;
padding: 20px 0;
8}

Step 3: Elevating the "Most Popular" Card

The middle card is given a prominent gradient border, subtle default scaling, and high-contrast button:

card-popular {
border: 2px solid #6366f1;
transform: scale(1.04);
box-shadow: 0 12px 30px -4px rgba(99, 102, 241, 0.2);
position: relative;
z-index: 10;
7}
8 
popular-ribbon {
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
background: var(--brand-gradient);
color: #ffffff;
padding: 4px 16px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 1px;
text-transform: uppercase;
white-space: nowrap;
23}

Step 4: Fluid Hover Micro-Interactions

When a student hovers over any card, it floats upward with an expanded ambient glow:

1.pricing-card {
2  transition: var(--trans-smooth);
3}
4 
5.pricing-card:hover {
6  transform: translateY(-8px);
7  box-shadow: var(--shadow-lift);
8}
9 
10.card-popular:hover {
11  transform: scale(1.04) translateY(-8px);
12}

4. Complete, Runnable Project Code

Save this complete HTML and CSS file as pricing.html and view it in your browser:

1<!DOCTYPE html>
2<html lang="en">
3<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Apex Coaching - Course Tuition Pricing Table</title>
<style>
  /* ==========================================================================
     1. VARIABLES & RESETS
     ========================================================================== */
  :root {
    --primary: #4f46e5;
    --primary-dark: #3730a3;
    --accent: #10b981;
    --accent-soft: #d1fae5;
    --text-dark: #0f172a;
    --text-muted: #64748b;
    --bg-page: #f1f5f9;
    --bg-card: #ffffff;
    --border-card: #e2e8f0;
    --radius-sm: 8px;
    --radius-card: 22px;
    --shadow-flat: 0 4px 16px rgba(15, 23, 42, 0.05);
    --shadow-hover: 0 24px 40px -10px rgba(79, 70, 229, 0.22);
    --ease-snappy: cubic-bezier(0.16, 1, 0.3, 1);
  }
27 
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  }
34 
  body {
    background-color: var(--bg-page);
    color: var(--text-dark);
    padding: 60px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
  }
44 
  /* ==========================================================================
     2. HEADER & INTRO
     ========================================================================== */
  .pricing-header {
    text-align: center;
    max-width: 650px;
    margin-bottom: 40px;
  }
53 
  .badge-pill {
    display: inline-block;
    padding: 6px 14px;
    background: #e0e7ff;
    color: var(--primary);
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
  }
66 
  .pricing-header h1 {
    font-size: clamp(2rem, 3.5vw, 2.6rem);
    color: var(--text-dark);
    margin-bottom: 12px;
  }
72 
  .pricing-header p {
    color: var(--text-muted);
    font-size: 1.05rem;
  }
77 
  /* ==========================================================================
     3. PRICING DECK (FLEXBOX LAYOUT)
     ========================================================================== */
  .pricing-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
    max-width: 1200px;
    width: 100%;
  }
90 
  .pricing-card {
    background: var(--bg-card);
    border-radius: var(--radius-card);
    border: 1px solid var(--border-card);
    padding: 36px 30px;
    width: 330px;
    box-shadow: var(--shadow-flat);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.35s var(--ease-snappy), box-shadow 0.35s var(--ease-snappy), border-color 0.35s ease;
  }
103 
  .pricing-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-hover);
    border-color: #cbd5e1;
  }
109 
  /* --- Featured Popular Card --- */
  .pricing-card.featured {
    border: 2px solid var(--primary);
    transform: scale(1.04);
    box-shadow: 0 16px 36px -6px rgba(79, 70, 229, 0.18);
    z-index: 10;
  }
117 
  .pricing-card.featured:hover {
    transform: scale(1.04) translateY(-8px);
    box-shadow: var(--shadow-hover);
  }
122 
  .popular-tag {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: #ffffff;
    padding: 4px 18px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
  }
139 
  /* --- Card Header & Pricing --- */
  .tier-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 6px;
  }
147 
  .tier-desc {
    font-size: 0.88rem;
    color: var(--text-muted);
    margin-bottom: 24px;
    min-height: 42px;
  }
154 
  .price-box {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border-card);
    padding-bottom: 20px;
  }
163 
  .currency {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-dark);
  }
169 
  .amount {
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--text-dark);
    line-height: 1;
  }
176 
  .period {
    font-size: 0.9rem;
    color: var(--text-muted);
    font-weight: 600;
  }
182 
  /* --- Features Checklist --- */
  .features-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 32px;
    flex-grow: 1;
  }
192 
  .feature-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.92rem;
    color: #334155;
  }
200 
  .check-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 900;
    flex-shrink: 0;
  }
214 
  .feature-item.disabled {
    color: #94a3b8;
    text-decoration: line-through;
  }
219 
  .feature-item.disabled .check-icon {
    background: #f1f5f9;
    color: #94a3b8;
  }
224 
  /* --- CTA Buttons --- */
  .btn-plan {
    width: 100%;
    padding: 14px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.95rem;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
    display: inline-block;
    border: 1px solid var(--border-card);
    background: #f8fafc;
    color: var(--text-dark);
  }
241 
  .btn-plan:hover {
    background: #e2e8f0;
    transform: translateY(-2px);
  }
246 
  .featured .btn-plan {
    background: var(--primary);
    color: #ffffff;
    border: none;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);
  }
253 
  .featured .btn-plan:hover {
    background: var(--primary-dark);
    box-shadow: 0 6px 18px rgba(79, 70, 229, 0.35);
  }
258 
  /* ==========================================================================
     4. RESPONSIVE MEDIA QUERIES
     ========================================================================== */
  @media (max-width: 1080px) {
    .pricing-card.featured {
      transform: scale(1);
    }
    .pricing-card.featured:hover {
      transform: translateY(-8px);
    }
  }
270 
  @media (max-width: 740px) {
    .pricing-container {
      flex-direction: column;
      align-items: center;
    }
    .pricing-card {
      width: 100%;
      max-width: 360px;
    }
  }
</style>
282</head>
283<body>
284 
<!-- HEADER -->
<header class="pricing-header">
  <div class="badge-pill">Academic Year 2026-27</div>
  <h1>Simple, Transparent Tuition Plans</h1>
  <p>Invest in your academic future with our structured classroom batches, live doubt labs, and personalized mentoring.</p>
</header>
291 
<!-- 3-CARD PRICING TABLE -->
<section class="pricing-container">
294 
  <!-- 1. BASIC / FOUNDATION -->
  <div class="pricing-card">
    <h3 class="tier-name">Foundation</h3>
    <p class="tier-desc">Ideal for Class 8-10 students strengthening basic math & science concepts.</p>
    
    <div class="price-box">
      <span class="currency">&#8377;</span>
      <span class="amount">1,499</span>
      <span class="period">/ month</span>
    </div>
305 
    <ul class="features-list">
      <li class="feature-item">
        <span class="check-icon">&#10003;</span>
        Recorded Video Lectures
      </li>
      <li class="feature-item">
        <span class="check-icon">&#10003;</span>
        Chapter-wise PDF Notes
      </li>
      <li class="feature-item">
        <span class="check-icon">&#10003;</span>
        Weekly Practice Quizzes
      </li>
      <li class="feature-item disabled">
        <span class="check-icon">&#10005;</span>
        Live 1-on-1 Doubt Sessions
      </li>
      <li class="feature-item disabled">
        <span class="check-icon">&#10005;</span>
        Olympiad Test Mock Series
      </li>
    </ul>
328 
    <a href="#enroll-foundation" class="btn-plan">Get Started</a>
  </div>
331 
  <!-- 2. PRO / OLYMPIAD (FEATURED) -->
  <div class="pricing-card featured">
    <div class="popular-tag">Most Recommended</div>
    <h3 class="tier-name">Olympiad Pro</h3>
    <p class="tier-desc">Complete syllabus coaching with daily live problem workshops and doubt support.</p>
    
    <div class="price-box">
      <span class="currency">&#8377;</span>
      <span class="amount">2,999</span>
      <span class="period">/ month</span>
    </div>
343 
    <ul class="features-list">
      <li class="feature-item">
        <span class="check-icon">&#10003;</span>
        Everything in Foundation
      </li>
      <li class="feature-item">
        <span class="check-icon">&#10003;</span>
        Daily Live Interactive Classes
      </li>
      <li class="feature-item">
        <span class="check-icon">&#10003;</span>
        1-on-1 Doubt Clearing Labs
      </li>
      <li class="feature-item">
        <span class="check-icon">&#10003;</span>
        All-India Rank Test Series
      </li>
      <li class="feature-item disabled">
        <span class="check-icon">&#10005;</span>
        Dedicated Personal IITian Mentor
      </li>
    </ul>
366 
    <a href="#enroll-pro" class="btn-plan">Join Pro Batch</a>
  </div>
369 
  <!-- 3. MASTER / IIT-JEE ELITE -->
  <div class="pricing-card">
    <h3 class="tier-name">JEE & NEET Elite</h3>
    <p class="tier-desc">Intensive rank-acceleration program with dedicated personal mentor and physical kits.</p>
    
    <div class="price-box">
      <span class="currency">&#8377;</span>
      <span class="amount">4,999</span>
      <span class="period">/ month</span>
    </div>
380 
    <ul class="features-list">
      <li class="feature-item">
        <span class="check-icon">&#10003;</span>
        Everything in Olympiad Pro
      </li>
      <li class="feature-item">
        <span class="check-icon">&#10003;</span>
        Dedicated Personal Mentor
      </li>
      <li class="feature-item">
        <span class="check-icon">&#10003;</span>
        Printed Study Modules Shipped
      </li>
      <li class="feature-item">
        <span class="check-icon">&#10003;</span>
        Weekly Parent Diagnostic Calls
      </li>
      <li class="feature-item">
        <span class="check-icon">&#10003;</span>
        Guaranteed Batch Capping (15 max)
      </li>
    </ul>
403 
    <a href="#enroll-elite" class="btn-plan">Join Elite Batch</a>
  </div>
406 
</section>
408 
409</body>
410</html>

5. Do's and Don'ts

Practice	Bad Approach	Good Approach	Why It Matters
Popular Card Stacking	Leaving all three cards identical in size and border	Pre-scaling the popular card (`scale(1.04)`) and adding a prominent badge	Guides student attention directly to the optimal offering.
Card Button Alignment	Letting buttons float at different heights when feature lists vary	Using `display: flex; flex-direction: column;` and `flex-grow: 1` on `.features-list`	Pushes every CTA button cleanly to the bottom baseline.
Mobile Scaling	Keeping `transform: scale(1.04)` enabled on mobile viewports	Removing or resetting scaling inside `@media (max-width: 1080px)`	Prevents oversized cards from breaking screen boundaries on phones.
Feature Comparisons	Deleting unavailable features completely from lower tier cards	Listing disabled features with strikethrough styling and muted check icons	Shows prospective students what extra value higher tiers offer.

6. Quick Revision Summary Cheat Sheet

Visual Dominance: Use transform: scale(1.04) and a distinctive border to create natural focal emphasis on the recommended plan.
Micro-Interaction: transform: translateY(-8px) combined with soft expanding box-shadow provides responsive tactile feedback.
Button Pinning: Applying flex-grow: 1 on the feature checklist ensures all buttons align horizontally across every tier card.
Responsive Stacking: Switch the flex parent to flex-direction: column and reset card scaling on small mobile devices.

Interactive Quiz• Knowledge Check

Multiple Choice Questions

Question 1

In modern pricing tables, why is the middle or recommended card often given transform: scale(1.04) by default?

Question 2

How can you ensure that the CTA buttons across all three pricing cards stay aligned at the exact bottom, even if one card has more feature bullets?

Question 3

Which CSS positioning strategy allows the "Most Recommended" pill tag to float half-way over the top edge of the card?

Question 4

What happens when a user hovers over a card with transform: translateY(-8px);?

Question 5

Why should transform: scale(1.04) on the featured card be reset or removed inside mobile media queries (max-width: 740px)?

Hands-on Practice Challenge

Add a pure CSS "Annual Billing (Save 20%)" discount toggle badge above the pricing table.

Requirements:

1
Above the cards, create a toggle pill container with two options: "Monthly" and "Annual (Save 20%)".
2
When the "Annual" option is active, display a glowing emerald discount tag (background: #10b981; color: white; padding: 2px 8px; border-radius: 12px; font-size: 0.75rem;).
3
Add a smooth transition when switching between the active and inactive options.

Complete Solution:

1<!DOCTYPE html>
2<html lang="en">
3<head>
<meta charset="UTF-8">
<title>Pricing Toggle Challenge</title>
<style>
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }
13 
  body {
    background: #f8fafc;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
  }
23 
  .billing-toggle-wrapper {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #ffffff;
    padding: 8px 16px;
    border-radius: 30px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  }
34 
  .toggle-label {
    font-size: 0.95rem;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s ease;
  }
45 
  .toggle-label.active {
    color: #0f172a;
  }
49 
  /* Switch container */
  .switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
  }
57 
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
63 
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    transition: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 28px;
  }
75 
  .slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }
88 
  input:checked + .slider {
    background-color: #4f46e5;
  }
92 
  input:checked + .slider:before {
    transform: translateX(22px);
  }
96 
  .discount-pill {
    background: #10b981;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 12px;
    letter-spacing: 0.5px;
  }
</style>
107</head>
108<body>
109 
<div class="billing-toggle-wrapper">
  <span class="toggle-label active">Monthly</span>
112 
  <label class="switch">
    <input type="checkbox" checked>
    <span class="slider"></span>
  </label>
117 
  <span class="toggle-label active">
    Annual
    <span class="discount-pill">Save 20%</span>
  </span>
</div>
123 
124</body>
125</html>

Related Lessons

Previous Lesson	Next Lesson
Project 2: Blog Layout using CSS Grid	None

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousPrevNext

MSK Institute • Shikohabad

Loading Page Content...

Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...

Connecting serverPlease wait...

💻 Practical Labs🚀 Free Demo📜 Verified Certificates

Project 3: Animated Pricing Table

Intermediate16 min read•Updated: 2026-09-10

Study Materials Cheatsheet

Project 3: Animated Pricing Table

1. Project Blueprint and Visual Hierarchy

A successful pricing table directs the student's eyes immediately to the best value option. Here is the architectural layout:

Visual Architecture Blueprint

+-------------------------------------------------------------------------+
|                  PRICING TABLE ARCHITECTURE & INTERACTION               |
+-------------------------------------------------------------------------+

              [SECTION HEADER: Choose Your Learning Track]
              
                 [TOGGLE PILL: (o) Monthly  |  ( ) Annual (Save 20%)]
                                     |
                                     v
   +--------------------+  +--------------------+  +--------------------+
   | TIER 1: FOUNDATION |  | TIER 2: PRO (HERO) |  | TIER 3: MASTER     |
   |                    |  |                    |  |                    |
   |                    |  | [POPULAR BADGE]    |  |                    |
   | Rs 1,499 / mo      |  | Rs 2,999 / mo      |  | Rs 4,999 / mo      |
   |                    |  |                    |  |                    |
   | - Recorded Lectures|  | - Recorded + LIVE  |  | - Everything in Pro|
   | - Weekly Quizzes   |  | - 1-on-1 Mentorship|  | - Personal Coach   |
   | - Standard Notes   |  | - All Test Series  |  | - Physical Books   |
   |                    |  |                    |  |                    |
   | [Select Plan]      |  | [JOIN PRO TRACK]   |  | [Select Plan]      |
   +--------------------+  +--------------------+  +--------------------+
     (Base Elevation)       (Pre-scaled 1.05x,      (Base Elevation)
                             Emerald Border,
                             Multi-layered Glow)
                                     |
               [HOVER EFFECT: Cards lift translateY(-8px)]

2. Key CSS Techniques Showcased

1
Visual Hierarchy & Middle Card Elevation: Scaling the popular tier (transform: scale(1.05)) so it physically stands out even before the user hovers.
2
"Most Popular" Ribbon with Absolute Positioning: Crafting a badge that overlaps the top border using position: absolute; top: -14px; left: 50%; transform: translateX(-50%);.
3
Smooth Micro-Interactions: Combining transition: transform 0.3s ease, box-shadow 0.3s ease; with subtle lift (translateY(-8px)).
4
CSS Feature Checkmarks: Styling custom green checkmarks and disabled strikethroughs using CSS pseudo-elements (::before).
5
Interactive Toggle Switch: Building a pure CSS monthly/annual pill toggle using an invisible <input type="checkbox"> and the adjacent sibling selector (+ .toggle-slider).

3. Step-by-Step Construction

Step 1: The Design Tokens & Base Theme

We define our primary indigo brand color, vibrant emerald for the recommended package, neutral card backgrounds, and easing speeds:

root {
--brand-primary: #4338ca;
--brand-gradient: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
--badge-emerald: #059669;
--text-main: #0f172a;
--text-muted: #64748b;
--bg-stage: #f8fafc;
--bg-card: #ffffff;
--border-card: #e2e8f0;
--radius-card: 20px;
--shadow-default: 0 4px 14px rgba(15, 23, 42, 0.06);
--shadow-lift: 0 20px 35px -8px rgba(79, 70, 229, 0.2);
--trans-smooth: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
14}

Step 2: Flexbox Card Container

The container uses display: flex with align-items: center so the non-featured cards sit comfortably while the featured card can naturally expand taller:

pricing-deck {
display: flex;
justify-content: center;
align-items: center;
gap: 28px;
flex-wrap: wrap;
padding: 20px 0;
8}

Step 3: Elevating the "Most Popular" Card

The middle card is given a prominent gradient border, subtle default scaling, and high-contrast button:

card-popular {
border: 2px solid #6366f1;
transform: scale(1.04);
box-shadow: 0 12px 30px -4px rgba(99, 102, 241, 0.2);
position: relative;
z-index: 10;
7}
8 
popular-ribbon {
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
background: var(--brand-gradient);
color: #ffffff;
padding: 4px 16px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 1px;
text-transform: uppercase;
white-space: nowrap;
23}

Step 4: Fluid Hover Micro-Interactions

When a student hovers over any card, it floats upward with an expanded ambient glow:

1.pricing-card {
2  transition: var(--trans-smooth);
3}
4 
5.pricing-card:hover {
6  transform: translateY(-8px);
7  box-shadow: var(--shadow-lift);
8}
9 
10.card-popular:hover {
11  transform: scale(1.04) translateY(-8px);
12}

4. Complete, Runnable Project Code

Save this complete HTML and CSS file as pricing.html and view it in your browser:

1<!DOCTYPE html>
2<html lang="en">
3<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Apex Coaching - Course Tuition Pricing Table</title>
<style>
  /* ==========================================================================
     1. VARIABLES & RESETS
     ========================================================================== */
  :root {
    --primary: #4f46e5;
    --primary-dark: #3730a3;
    --accent: #10b981;
    --accent-soft: #d1fae5;
    --text-dark: #0f172a;
    --text-muted: #64748b;
    --bg-page: #f1f5f9;
    --bg-card: #ffffff;
    --border-card: #e2e8f0;
    --radius-sm: 8px;
    --radius-card: 22px;
    --shadow-flat: 0 4px 16px rgba(15, 23, 42, 0.05);
    --shadow-hover: 0 24px 40px -10px rgba(79, 70, 229, 0.22);
    --ease-snappy: cubic-bezier(0.16, 1, 0.3, 1);
  }
27 
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  }
34 
  body {
    background-color: var(--bg-page);
    color: var(--text-dark);
    padding: 60px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
  }
44 
  /* ==========================================================================
     2. HEADER & INTRO
     ========================================================================== */
  .pricing-header {
    text-align: center;
    max-width: 650px;
    margin-bottom: 40px;
  }
53 
  .badge-pill {
    display: inline-block;
    padding: 6px 14px;
    background: #e0e7ff;
    color: var(--primary);
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
  }
66 
  .pricing-header h1 {
    font-size: clamp(2rem, 3.5vw, 2.6rem);
    color: var(--text-dark);
    margin-bottom: 12px;
  }
72 
  .pricing-header p {
    color: var(--text-muted);
    font-size: 1.05rem;
  }
77 
  /* ==========================================================================
     3. PRICING DECK (FLEXBOX LAYOUT)
     ========================================================================== */
  .pricing-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
    max-width: 1200px;
    width: 100%;
  }
90 
  .pricing-card {
    background: var(--bg-card);
    border-radius: var(--radius-card);
    border: 1px solid var(--border-card);
    padding: 36px 30px;
    width: 330px;
    box-shadow: var(--shadow-flat);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.35s var(--ease-snappy), box-shadow 0.35s var(--ease-snappy), border-color 0.35s ease;
  }
103 
  .pricing-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-hover);
    border-color: #cbd5e1;
  }
109 
  /* --- Featured Popular Card --- */
  .pricing-card.featured {
    border: 2px solid var(--primary);
    transform: scale(1.04);
    box-shadow: 0 16px 36px -6px rgba(79, 70, 229, 0.18);
    z-index: 10;
  }
117 
  .pricing-card.featured:hover {
    transform: scale(1.04) translateY(-8px);
    box-shadow: var(--shadow-hover);
  }
122 
  .popular-tag {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: #ffffff;
    padding: 4px 18px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
  }
139 
  /* --- Card Header & Pricing --- */
  .tier-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 6px;
  }
147 
  .tier-desc {
    font-size: 0.88rem;
    color: var(--text-muted);
    margin-bottom: 24px;
    min-height: 42px;
  }
154 
  .price-box {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border-card);
    padding-bottom: 20px;
  }
163 
  .currency {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-dark);
  }
169 
  .amount {
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--text-dark);
    line-height: 1;
  }
176 
  .period {
    font-size: 0.9rem;
    color: var(--text-muted);
    font-weight: 600;
  }
182 
  /* --- Features Checklist --- */
  .features-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 32px;
    flex-grow: 1;
  }
192 
  .feature-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.92rem;
    color: #334155;
  }
200 
  .check-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 900;
    flex-shrink: 0;
  }
214 
  .feature-item.disabled {
    color: #94a3b8;
    text-decoration: line-through;
  }
219 
  .feature-item.disabled .check-icon {
    background: #f1f5f9;
    color: #94a3b8;
  }
224 
  /* --- CTA Buttons --- */
  .btn-plan {
    width: 100%;
    padding: 14px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.95rem;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
    display: inline-block;
    border: 1px solid var(--border-card);
    background: #f8fafc;
    color: var(--text-dark);
  }
241 
  .btn-plan:hover {
    background: #e2e8f0;
    transform: translateY(-2px);
  }
246 
  .featured .btn-plan {
    background: var(--primary);
    color: #ffffff;
    border: none;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);
  }
253 
  .featured .btn-plan:hover {
    background: var(--primary-dark);
    box-shadow: 0 6px 18px rgba(79, 70, 229, 0.35);
  }
258 
  /* ==========================================================================
     4. RESPONSIVE MEDIA QUERIES
     ========================================================================== */
  @media (max-width: 1080px) {
    .pricing-card.featured {
      transform: scale(1);
    }
    .pricing-card.featured:hover {
      transform: translateY(-8px);
    }
  }
270 
  @media (max-width: 740px) {
    .pricing-container {
      flex-direction: column;
      align-items: center;
    }
    .pricing-card {
      width: 100%;
      max-width: 360px;
    }
  }
</style>
282</head>
283<body>
284 
<!-- HEADER -->
<header class="pricing-header">
  <div class="badge-pill">Academic Year 2026-27</div>
  <h1>Simple, Transparent Tuition Plans</h1>
  <p>Invest in your academic future with our structured classroom batches, live doubt labs, and personalized mentoring.</p>
</header>
291 
<!-- 3-CARD PRICING TABLE -->
<section class="pricing-container">
294 
  <!-- 1. BASIC / FOUNDATION -->
  <div class="pricing-card">
    <h3 class="tier-name">Foundation</h3>
    <p class="tier-desc">Ideal for Class 8-10 students strengthening basic math & science concepts.</p>
    
    <div class="price-box">
      <span class="currency">&#8377;</span>
      <span class="amount">1,499</span>
      <span class="period">/ month</span>
    </div>
305 
    <ul class="features-list">
      <li class="feature-item">
        <span class="check-icon">&#10003;</span>
        Recorded Video Lectures
      </li>
      <li class="feature-item">
        <span class="check-icon">&#10003;</span>
        Chapter-wise PDF Notes
      </li>
      <li class="feature-item">
        <span class="check-icon">&#10003;</span>
        Weekly Practice Quizzes
      </li>
      <li class="feature-item disabled">
        <span class="check-icon">&#10005;</span>
        Live 1-on-1 Doubt Sessions
      </li>
      <li class="feature-item disabled">
        <span class="check-icon">&#10005;</span>
        Olympiad Test Mock Series
      </li>
    </ul>
328 
    <a href="#enroll-foundation" class="btn-plan">Get Started</a>
  </div>
331 
  <!-- 2. PRO / OLYMPIAD (FEATURED) -->
  <div class="pricing-card featured">
    <div class="popular-tag">Most Recommended</div>
    <h3 class="tier-name">Olympiad Pro</h3>
    <p class="tier-desc">Complete syllabus coaching with daily live problem workshops and doubt support.</p>
    
    <div class="price-box">
      <span class="currency">&#8377;</span>
      <span class="amount">2,999</span>
      <span class="period">/ month</span>
    </div>
343 
    <ul class="features-list">
      <li class="feature-item">
        <span class="check-icon">&#10003;</span>
        Everything in Foundation
      </li>
      <li class="feature-item">
        <span class="check-icon">&#10003;</span>
        Daily Live Interactive Classes
      </li>
      <li class="feature-item">
        <span class="check-icon">&#10003;</span>
        1-on-1 Doubt Clearing Labs
      </li>
      <li class="feature-item">
        <span class="check-icon">&#10003;</span>
        All-India Rank Test Series
      </li>
      <li class="feature-item disabled">
        <span class="check-icon">&#10005;</span>
        Dedicated Personal IITian Mentor
      </li>
    </ul>
366 
    <a href="#enroll-pro" class="btn-plan">Join Pro Batch</a>
  </div>
369 
  <!-- 3. MASTER / IIT-JEE ELITE -->
  <div class="pricing-card">
    <h3 class="tier-name">JEE & NEET Elite</h3>
    <p class="tier-desc">Intensive rank-acceleration program with dedicated personal mentor and physical kits.</p>
    
    <div class="price-box">
      <span class="currency">&#8377;</span>
      <span class="amount">4,999</span>
      <span class="period">/ month</span>
    </div>
380 
    <ul class="features-list">
      <li class="feature-item">
        <span class="check-icon">&#10003;</span>
        Everything in Olympiad Pro
      </li>
      <li class="feature-item">
        <span class="check-icon">&#10003;</span>
        Dedicated Personal Mentor
      </li>
      <li class="feature-item">
        <span class="check-icon">&#10003;</span>
        Printed Study Modules Shipped
      </li>
      <li class="feature-item">
        <span class="check-icon">&#10003;</span>
        Weekly Parent Diagnostic Calls
      </li>
      <li class="feature-item">
        <span class="check-icon">&#10003;</span>
        Guaranteed Batch Capping (15 max)
      </li>
    </ul>
403 
    <a href="#enroll-elite" class="btn-plan">Join Elite Batch</a>
  </div>
406 
</section>
408 
409</body>
410</html>

5. Do's and Don'ts

Practice	Bad Approach	Good Approach	Why It Matters
Popular Card Stacking	Leaving all three cards identical in size and border	Pre-scaling the popular card (`scale(1.04)`) and adding a prominent badge	Guides student attention directly to the optimal offering.
Card Button Alignment	Letting buttons float at different heights when feature lists vary	Using `display: flex; flex-direction: column;` and `flex-grow: 1` on `.features-list`	Pushes every CTA button cleanly to the bottom baseline.
Mobile Scaling	Keeping `transform: scale(1.04)` enabled on mobile viewports	Removing or resetting scaling inside `@media (max-width: 1080px)`	Prevents oversized cards from breaking screen boundaries on phones.
Feature Comparisons	Deleting unavailable features completely from lower tier cards	Listing disabled features with strikethrough styling and muted check icons	Shows prospective students what extra value higher tiers offer.

6. Quick Revision Summary Cheat Sheet

Visual Dominance: Use transform: scale(1.04) and a distinctive border to create natural focal emphasis on the recommended plan.
Micro-Interaction: transform: translateY(-8px) combined with soft expanding box-shadow provides responsive tactile feedback.
Button Pinning: Applying flex-grow: 1 on the feature checklist ensures all buttons align horizontally across every tier card.
Responsive Stacking: Switch the flex parent to flex-direction: column and reset card scaling on small mobile devices.

Interactive Quiz• Knowledge Check

Multiple Choice Questions

Question 1

In modern pricing tables, why is the middle or recommended card often given transform: scale(1.04) by default?

Question 2

How can you ensure that the CTA buttons across all three pricing cards stay aligned at the exact bottom, even if one card has more feature bullets?

Question 3

Which CSS positioning strategy allows the "Most Recommended" pill tag to float half-way over the top edge of the card?

Question 4

What happens when a user hovers over a card with transform: translateY(-8px);?

Question 5

Why should transform: scale(1.04) on the featured card be reset or removed inside mobile media queries (max-width: 740px)?

Hands-on Practice Challenge

Add a pure CSS "Annual Billing (Save 20%)" discount toggle badge above the pricing table.

Requirements:

1
Above the cards, create a toggle pill container with two options: "Monthly" and "Annual (Save 20%)".
2
When the "Annual" option is active, display a glowing emerald discount tag (background: #10b981; color: white; padding: 2px 8px; border-radius: 12px; font-size: 0.75rem;).
3
Add a smooth transition when switching between the active and inactive options.

Complete Solution:

1<!DOCTYPE html>
2<html lang="en">
3<head>
<meta charset="UTF-8">
<title>Pricing Toggle Challenge</title>
<style>
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }
13 
  body {
    background: #f8fafc;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
  }
23 
  .billing-toggle-wrapper {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #ffffff;
    padding: 8px 16px;
    border-radius: 30px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  }
34 
  .toggle-label {
    font-size: 0.95rem;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s ease;
  }
45 
  .toggle-label.active {
    color: #0f172a;
  }
49 
  /* Switch container */
  .switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
  }
57 
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
63 
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    transition: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 28px;
  }
75 
  .slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }
88 
  input:checked + .slider {
    background-color: #4f46e5;
  }
92 
  input:checked + .slider:before {
    transform: translateX(22px);
  }
96 
  .discount-pill {
    background: #10b981;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 12px;
    letter-spacing: 0.5px;
  }
</style>
107</head>
108<body>
109 
<div class="billing-toggle-wrapper">
  <span class="toggle-label active">Monthly</span>
112 
  <label class="switch">
    <input type="checkbox" checked>
    <span class="slider"></span>
  </label>
117 
  <span class="toggle-label active">
    Annual
    <span class="discount-pill">Save 20%</span>
  </span>
</div>
123 
124</body>
125</html>

Related Lessons

Previous Lesson	Next Lesson
Project 2: Blog Layout using CSS Grid	None

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.