Trình tạo bảng giá CSS

Cấu trúc khung sườn

<section class="pricing">
  <article class="plan">
    <h3>Starter</h3>
    <p class="price">$9 <span>/mo</span></p>
    <p class="tagline">For solo projects.</p>
    <ul class="features">
      <li>3 projects</li>
      <li>10 GB storage</li>
      <li>Community support</li>
    </ul>
    <a class="cta" href="#">Start free</a>
  </article>

  <article class="plan featured">
    <span class="badge">Most popular</span>
    <h3>Pro</h3>
    <p class="price">$29 <span>/mo</span></p>
    <!-- ... -->
  </article>

  <article class="plan">
    <h3>Team</h3>
    <!-- ... -->
  </article>
</section>

Lưới ba cột responsive

.pricing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}

.plan {
  padding: 2rem 1.5rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
}

.plan.featured {
  border: 2px solid #2563eb;
  position: relative;
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.15);
}

Kết hợp auto-fit với minmax(240px, 1fr) cho bố cục ba cột trên desktop và xếp chồng một cột trên di động, không cần cấu hình gì thêm.

Gói được làm nổi bật

Những tín hiệu thị giác giúp thu hút sự chú ý:

• Viền màu trùng với màu nhấn của thương hiệu.
• Nâng nhẹ thẻ lên bằng margin-top âm hoặc translateY(-4px).
• Nút CTA lớn hơn, thường tô đầy màu thương hiệu, trong khi các gói còn lại chỉ dùng nút viền.
• Nhãn (“Phổ biến nhất”, “Đáng tiền nhất”) đặt absolute ở đỉnh thẻ.
• Thẻ cao hơn để hút mắt, dù cách này khiến việc so sánh giữa các gói khó hơn.

Đừng dùng tất cả cùng lúc, hãy chọn hai hoặc ba. Quá nhiều tín hiệu sẽ làm phẳng chính cái thứ bậc mà bạn muốn tạo ra.

Nút chuyển đổi theo tháng / theo năm

<div class="billing-toggle">
  <button data-active="true">Monthly</button>
  <button>Annual · Save 20%</button>
</div>

Nút này thường đổi giá trị giá bằng một đoạn JavaScript ngắn, hoặc dùng trạng thái :checked của nút radio. Hãy hiển thị luôn phần trăm giảm giá hoặc số tiền tiết kiệm được (ví dụ “Tiết kiệm 20% khi trả theo năm”) ngay trên nhãn của nút: trong nhiều bảng giá, đây là chi tiết có sức thuyết phục lớn nhất.

Định dạng dòng tính năng

.features {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.features li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.features li.yes::before {
  content: "";
  width: 16px; height: 16px;
  background: url(...check.svg);
}
.features li.no {
  color: #9ca3af;
  text-decoration: line-through;
}

Dùng dấu tích cho tính năng “có”, và chữ xám hoặc dấu X nhạt cho tính năng “không có”. Đừng gạch ngang chữ mà không giảm độ tương phản, vì như vậy nó lại trông giống một điểm được nhấn mạnh hơn là một tính năng bị loại bỏ.

Giữ cho CTA thật nổi bật

Mỗi gói một nút CTA, đồng nhất về mặt thị giác giữa các gói. Dùng chữ khác nhau cho từng gói (“Dùng thử miễn phí”, “Nâng cấp lên Pro”, “Liên hệ đội ngũ bán hàng”) là hoàn toàn ổn, và thực tế còn giúp dẫn người dùng vào đúng luồng.

Làm cho bảng dễ lướt mắt

Người dùng hiếm khi đọc bảng giá từ trái sang phải; họ lướt qua giá trước, rồi tới nút CTA, cuối cùng mới xem khác biệt về tính năng. Hãy tối ưu theo đúng thứ tự đó:

1. Tên gói và giá cỡ lớn, đặt ở đầu thẻ.
2. Nút CTA nhìn thấy được mà không phải cuộn thẻ.
3. Danh sách tính năng nằm bên dưới. Hãy làm nổi bật khác biệt giữa các gói thay vì lặp lại những tính năng giống hệt nhau ở mọi cột.

Danh sách kiểm tra khả năng tiếp cận

• Mỗi gói là một thẻ <article> riêng, có <h3> của chính nó.
• Nhãn “Phổ biến nhất” phải là nhãn chữ nhìn thấy được, không chỉ dựa vào màu sắc (để hỗ trợ người dùng mù màu).
• Nút CTA dùng chữ mô tả rõ ràng (“Bắt đầu dùng thử gói Pro”) thay vì “Nhấn vào đây”.
• Nút chuyển chu kỳ thanh toán có aria-pressed hoặc dùng ngữ nghĩa của nút radio.
• Nếu triển khai bằng JavaScript, thay đổi giá khi bấm nút cần được thông báo qua aria-live="polite".