Animasyonlu Fiyatlandırma Kartı

Fareyle üzerine gelindiğinde vurgulanan ve animasyonlu bir fiyatlandırma bölümüne sahip, modern, tek bir fiyatlandırma kartı. Bu, örneğin fiyat planı seçim ekranında belirli bir planı vurgulamak istediğinizde idealdir.

Önizleme

Pro Plan

Ciddi projeler ve iş amaçlı kullanım için idealdir.

¥4,980/ 月

sınırsız proje作成
高度なanalitik機能
24時間365日のÖncelikli destek
özel etki alanı bağlantısı

Kullanım Durumları ve Özellikler

SaaS ve hizmet fiyat listesi: En çok önerilen planı veya kullanıcının birden fazla plan düzenlerken üzerine geldiği planı vurgulamak için uygundur.
Görsel Geribildirim: Kartın tamamı fareyle üzerine gelindiğinde yukarı kalkar ve üstte renkli bir vurgu çizgisi belirir. Ayrıca fiyat kısmı kullanıcının dikkatini fiyata çekecek şekilde ölçeklendirilecek.

Tasarım ve UX’in önemli noktaları (Tasarım ve UX)

Sorunsuz animasyon: Fareyle üzerine gelindiğinde gölgeleri ve konumu sorunsuz bir şekilde değiştirmek için “geçiş-tüm süre-300” seçeneğini kullanın.
Fiyat vurgusu: ‘group-hover:scale-110 Origin-left’ sınıfı kullanılarak kartın tamamının üzerine gelindiğinde soldan başlayarak sadece fiyat kısmı biraz büyütülerek daha dikkat çekici hale getirilecektir.
Temiz düzen: Kenar boşlukları (Dolgu) ve metin rengi (Arduvaz stili), bilgilerin okunmasını kolaylaştıran modern bir tasarım oluşturmak için uygun şekilde ayarlanmıştır.

Nasıl kişiselleştirilir (Özelleştirme Kılavuzu)

Renk temasını değiştirin: “bg-gradient-to-r from-blue-500’den-indigo-500’e” veya düğme vurgulu rengi “hover:bg-blue-600”den marka rengine (örneğin, yeşil renk için “from-emerald-500’den-teal-500’e”) Bir tema rengini “hover:bg-emerald-600” olarak değiştirerek kolayca uygulayabilirsiniz.
Animasyon ayarlaması: “hover:-translate-y-2” değerini değiştirerek kayan yüksekliği değiştirebilir veya “group-hover:scale-110”u “105” vb. olarak ayarlayarak fiyatın genişleme genişliğine ince ayar yapabilirsiniz.

uygulama kodu (Implementation)

<div class="pricing-card relative w-full max-w-sm rounded-2xl bg-white border border-slate-200 p-8 shadow-sm transition-all duration-300 hover:shadow-xl hover:-translate-y-2 hover:border-blue-500 overflow-hidden group">
<!-- Background Accent Line -->
<div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-blue-500 to-indigo-500 opacity-0 transition-opacity duration-300 group-hover:opacity-100"></div>

<!-- Header -->
<div class="mb-6">
  <h3 class="text-xl font-bold text-slate-800 mb-2">Pro Plan</h3>
  <p class="text-sm text-slate-500">Ciddi projeler ve iş amaçlı kullanım için idealdir.</p>
</div>

<!-- Price -->
<div class="mb-6 flex items-baseline">
  <span class="text-4xl font-extrabold text-slate-900 transition-transform duration-300 group-hover:scale-110 origin-left inline-block">¥4,980</span>
  <span class="text-slate-500 ml-2">/ 月</span>
</div>

<!-- Features -->
<ul class="space-y-4 mb-8">
  <li class="flex items-start">
    <svg class="w-5 h-5 text-blue-500 mt-0.5 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
    </svg>
    <span class="text-slate-600">sınırsız proje作成</span>
  </li>
  <li class="flex items-start">
    <svg class="w-5 h-5 text-blue-500 mt-0.5 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
    </svg>
    <span class="text-slate-600">高度なanalitik機能</span>
  </li>
  <li class="flex items-start">
    <svg class="w-5 h-5 text-blue-500 mt-0.5 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
    </svg>
    <span class="text-slate-600">24時間365日のÖncelikli destek</span>
  </li>
  <li class="flex items-start">
    <svg class="w-5 h-5 text-blue-500 mt-0.5 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
    </svg>
    <span class="text-slate-600">özel etki alanı bağlantısı</span>
  </li>
</ul>

<!-- CTA Button -->
<button class="w-full py-3 px-4 bg-slate-900 hover:bg-blue-600 text-white font-medium rounded-xl transition-colors duration-300 focus:ring-4 focus:ring-blue-100 focus:outline-none">
  Bir plan seçin
</button>
</div>

Tarayıcı Desteği

Modern tarayıcıların (Chrome, Firefox, Safari, Edge) en son sürümleriyle iyi çalışır.
Tailwind CSS’nin “grup vurgulu” özelliğinden yararlanır, dolayısıyla özel bir JavaScript gerekmez.