CSS Fiyat Tablosu Oluşturucu

Temel iskelet yapısı

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

Duyarlı üç sütunlu grid

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

auto-fit ile minmax(240px, 1fr) birlikte kullanıldığında masaüstünde üç sütunlu bir düzen, mobilde ise tek sütunlu bir dizilim elde edersiniz; başka hiçbir ayar yapmanız gerekmez.

Öne çıkarılan paket

Dikkat çeken görsel ipuçları:

• Renkli kenarlık: markanın vurgu rengiyle uyumlu olsun.
• Hafifçe yukarı kaydırma: negatif margin-top ya da translateY(-4px) ile.
• Daha büyük CTA düğmesi: genellikle marka renginde dolu; diğer paketlerde ise yalnızca çerçeveli düğme kullanılır.
• Rozet (“En popüler”, “En avantajlı”) kartın tepesine absolute konumlandırılır.
• Daha yüksek kart gözü çeker, ama paketleri karşılaştırmayı zorlaştırabilir.

Bunların hepsini birden uygulamayın; iki ya da üç tanesini seçin. Çok fazla ipucu, kurmak istediğiniz hiyerarşiyi düzleştirir.

Aylık / yıllık anahtarı

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

Anahtar genellikle küçük bir JavaScript koduyla fiyat değerlerini değiştirir ya da bir radyo düğmesindeki :checked durumunu kullanır. İndirim yüzdesini veya yıllık ödemede kazanılan tutarı (“Yıllık ödemede %20 indirim” gibi) doğrudan anahtarın etiketinde gösterin: birçok tabloda en ikna edici tek unsur budur.

Özellik satırlarının biçimlendirilmesi

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

“Dahil” olan özellikler için onay işareti, “dahil değil” olanlar için gri metin veya soluk bir çarpı kullanın. Kontrastı düşürmeden metnin üstünü çizmeyin; aksi hâlde üstü çizili metin, dışlanmış bir özellikten çok vurgulanmış bir özellik gibi okunur.

CTA her zaman göz önünde kalsın

Her pakette tek bir CTA olsun ve tüm paketlerde görsel olarak tutarlı görünsün. Paket başına farklı metin kullanmak (“Ücretsiz başla”, “Pro’ya geç”, “Satış ekibiyle görüş”) sorun değildir; hatta kullanıcıyı doğru akışa yönlendirmeye yardımcı olur.

Göz gezdirerek okunabilir olsun

Kullanıcılar fiyat tablolarını soldan sağa okumaz; önce fiyatlara, sonra CTA düğmelerine, en son da özellik farklarına bakar. Tabloyu bu sıraya göre kurgulayın:

1. Paket adı ve fiyat kartın üst kısmında büyük punto ile yer alsın.
2. CTA, kartı kaydırmaya gerek kalmadan görünsün.
3. Özellik listesi altta olsun. Her sütunda aynı özellikleri tekrarlamak yerine paketler arasındaki farkları öne çıkarın.

Erişilebilirlik kontrol listesi

• Her paket, kendi <h3> başlığına sahip ayrı bir <article> öğesidir.
• “En popüler” rozeti yalnızca renkle değil, görünür bir metinle belirtilir (renk körü kullanıcılar için).
• CTA düğmelerinde “Buraya tıklayın” yerine açıklayıcı bir metin bulunur (“Pro denemesini başlat”).
• Ödeme dönemi anahtarında aria-pressed ya da radyo düğmesi semantiği kullanılır.
• Anahtar JavaScript ile yapıldıysa fiyat değişimi aria-live="polite" ile duyurulur.