طراحی کارت قیمت‌گذاری با CSS

کارت‌های قیمت‌گذاری (Pricing Cards) از پرکاربردترین اجزای صفحات فروش و لندینگ‌ها هستند. طراحی درست آنها نه‌فقط ظاهر زیبا، بلکه انتقال واضح پیام، انتخاب کاربر و بهبود نرخ تبدیل را به همراه دارد. در این مقاله به اصول فنی، نمونه‌های عملی و نکات حرفه‌ای طراحی کارت قیمت‌گذاری با CSS و HTML می‌پردازیم.

مبانی ساختار HTML

ابتدا یک ساختار ساده و معنایی برای کارت‌ها ایجاد کنید. در مثال زیر از شناسه‌ها و کلاس‌های معنادار استفاده شده است:

<section class="pricing">
  <article class="card basic">
    <h3>Basic</h3>
    <p class="price">$9<span>/month</span></p>
    <ul>
      <li>1 user</li>
      <li>10GB storage</li>
      <li>Email support</li>
    </ul>
    <a class="cta" href="#">Choose</a>
  </article>

  <article class="card pro featured">
    <h3>Pro</h3>
    <p class="price">$29<span>/month</span></p>
    <ul>
      <li>5 users</li>
      <li>100GB storage</li>
      <li>Priority support</li>
    </ul>
    <a class="cta" href="#">Get Pro</a>
  </article>
</section>

توضیح: این HTML ساختار پایه کارت‌ها را نشان می‌دهد. از article برای هر کارت و section برای گروه‌بندی استفاده شده تا معنای محتوایی حفظ شود. کلاس featured برای برجسته‌سازی پلن دلخواه در نظر گرفته شده است.

استایل پایه با Flexbox و CSS Variables

:root{
  --card-bg:#fff;
  --accent:#4f46e5;
  --muted:#6b7280;
  --radius:12px;
  --shadow:0 6px 20px rgba(15,23,42,0.08);
  --gap:1.25rem;
  --max-width:1100px;
}

.pricing{
  display:flex;
  gap:var(--gap);
  justify-content:center;
  flex-wrap:wrap;
  max-width:var(--max-width);
  margin:0 auto;
  padding:2rem;
}

.card{
  background:var(--card-bg);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:1.5rem;
  width:280px;
  display:flex;
  flex-direction:column;
  gap:1rem;
  transition:transform .18s ease, box-shadow .18s ease;
}

.card:hover{ transform:translateY(-6px); box-shadow:0 12px 30px rgba(15,23,42,0.12); }

.card .price{ font-size:2.25rem; color:var(--accent); margin:0; }

.card .price span{ font-size:0.9rem; color:var(--muted); margin-left:6px; }

.card ul{ list-style:none; padding:0; margin:0; color:var(--muted); }

.card .cta{
  margin-top:auto;
  text-decoration:none;
  text-align:center;
  background:var(--accent);
  color:#fff;
  padding:0.6rem 0.8rem;
  border-radius:8px;
  display:inline-block;
}

توضیح: این CSS از متغیرهای ریشه برای تنظیم آسان تم و از Flexbox برای چیدمان استفاده می‌کند. hover کارت با حرکت و افزایش سایه، تعامل بصری ایجاد می‌کند. کلاس .cta به‌عنوان دکمه انتخاب عمل می‌کند.

نسخه بهینه: ریسپانسیو و دسترس‌پذیر

@media (max-width:900px){
  .pricing{ gap:1rem; padding:1rem; }
  .card{ width:100%; min-width:240px; }
}

/* featured card */.card.featured{
  transform:scale(1.03);
  border:2px solid rgba(79,70,229,0.12);
}

/* keyboard focus و کاهش حرکت برای کاربرانی که prefer-reduced-motion فعال دارند */@media (prefers-reduced-motion:reduce){
  .card, .card:hover{ transition:none; transform:none; }
}

.card .cta:focus{
  outline:3px solid rgba(79,70,229,0.18);
  outline-offset:3px;
}

توضیح: رسانه‌کوئری برای نمایش موبایل و تنظیم عرض کارت‌ها است. رعایت prefers-reduced-motion و مدیریت حالت فوکوس از نکات مهم دسترس‌پذیری است تا تجربه برای همه کاربران مناسب باشد.

افکت‌های جذاب و سبُک با CSS

.ribbon{
  position:relative;
  display:inline-block;
  background:linear-gradient(90deg,#7c3aed,#4f46e5);
  color:#fff;
  padding:0.25rem 0.6rem;
  border-radius:999px;
  font-size:0.8rem;
  box-shadow:0 6px 18px rgba(79,70,229,0.12);
}
.card.featured::before{
  content:"Most popular";
  position:absolute;
  top:-12px;
  left:50%;
  transform:translateX(-50%);
  font-size:0.75rem;
  background:var(--accent);
  color:#fff;
  padding:0.25rem 0.5rem;
  border-radius:999px;
}

توضیح: نواری (ribbon) و pseudo-element برای برچسب‌بندی پلن محبوب استفاده می‌شود. از گرادینت و سایه کم برای ایجاد جلوه‌ای مدرن بهره برده‌ایم.

جدول مقایسه سریع ویژگی‌ها

نکات حرفه‌ای و بهترین شیوه‌ها

• از CSS variables برای تغییر سریع رنگ و فواصل استفاده کنید تا ایجاد تم‌های مختلف ساده شود.
• با BEM یا قواعد نام‌گذاری معنادار مدیریت CSS در پروژه‌های بزرگ را آسان کنید.
• سعی کنید متن قیمت و مزایا واضح و کوتاه باشد؛ کاربران در نگاه اول تصمیم می‌گیرند.
• در صورت امکان، از داده‌های واقعی (مثلاً مقایسه مصرف) در کارت استفاده کنید تا اعتماد افزایش یابد.
• برای پلن برجسته از رنگ و اندازه متفاوت، انیمیشن ملایم و برچسبی مثل «پرفروش» یا «پیشنهاد ما» بهره ببرید.
• در لینک‌های CTA از عبارات اقدام محور و کوتاه استفاده کنید: «شروع کنید»، «مشاهده جزئیات»، «انتخاب».
• مدیریت اولویت بارگذاری: استایل‌های مربوط به کارت‌ها را در بالای CSS عمومی قرار داده و تصاویر سنگین را با lazy-loading بارگذاری کنید.
• تست A/B ساده: رنگ دکمه، متن CTA و نمایش قیمت را جداگانه تست کنید تا بیشترین تبدیل را بیابید.

چک‌لیست عملی برای پیاده‌سازی

• HTML معنایی با article/section.
• استفاده از CSS variables و Flexbox/Grid.
• ریسپانسیو: media query برای موبایل.
• دسترسی: aria-label در دکمه‌ها و focus واضح.
• عملکرد: نه‌چندان سنگین و با تصاویر بهینه.
• قابلیت شخصی‌سازی: کلاس featured و موارد قابل تغییر برای تیم محصول.

با دنبال کردن اصول بالا می‌توانید کارت‌های قیمت‌گذاری زیبا، قابل استفاده و مؤثر بسازید. نمونه‌های ارائه‌شده را به عنوان پایه در نظر گرفته و بر اساس هویت بصری و نیاز کاربران خود سفارشی‌سازی کنید.

لطفاً از کمبود ها و مشکلات این محتوا برای ما بنویسید

ارسال