SnippetUI
← Back to snippets

Shimmer Buton

Fareyle üzerine gelindiğinde ve periyodik olarak bir ışık bandı (ışıltı efekti) yayan güzel bir düğme bileşeni.

HTMLCSSTailwind CSSReact

Vurgulu olarak ve periyodik olarak akan bir ışık bandı (ışıltı etkisi) ile göze çarpan güzel bir düğme bileşenidir. Kullanıcının dikkatini çekmek istediğiniz CTA (Harekete Geçirici Mesaj) için idealdir.

Önizleme

Kullanım Durumları ve Özellikler

  • Dönüşüm oranlarını iyileştirin: Görsel hareket, kullanıcıların dikkatini çekmeyi kolaylaştırarak kaydolma ve satın alma düğmeleri gibi önemli harekete geçirici mesajlar (CTA) için mükemmel hale getirir.

  • Küçük Animasyon: Çok gösterişli olmayan, düzenli periyodik parıltı (ışık yansıması) efektiyle sofistike bir izlenim verir.

  • Mikro etkileşimler: Düğme fareyle üzerine gelindiğinde hafifçe kaldırılacak ve tıklanabilir bir öğe olduğunu vurgulamak için bir gölge eklenecektir.

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

  • Kontrast ve Görünürlük: Etki, parlak ışık bantlarının karanlık bir arka plan üzerinde çalıştırılmasıyla vurgulanır.

  • Performans: “Dönüştürme” ve “opaklık” kullanan animasyon, tarayıcıdaki çizim yükünü en aza indirir ve düzgün hareket sağlar.

  • Erişilebilirlik: Odaklama halkası (“odak:halka”) uygun şekilde ayarlanmıştır, böylece klavye işlemleriyle bile durum görsel olarak iletilebilir.

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

  • Rengi değiştir: “rgba(255, 255, 255, 0,2)” seçeneğini marka renginize (ör. “rgba(59, 130, 246, 0,3)”) değiştirerek ışığın rengini özelleştirebilirsiniz.

  • Animasyon hızı ayarı: “Animasyon: ışıltı efekti 3s sonsuz;“un “3s”sini “2s”ye ayarlamak daha hızlı hareket etmesini sağlar ve “5s”yi ayarlamak daha yavaş hareket etmesini sağlar.

  • Yalnızca Tailwind ile uygulama: “tailwind.config.js” dosyasına “anahtar kareler” ekleyerek, uygulamayı özel sınıflar kullanmadan yalnızca Tailwind’in yardımcı program sınıflarıyla tamamlamak mümkündür.

Uygulama kodu (Uygulama)

HTML & CSS (Tailwind CSS併用)

<button class="shimmer-btn text-slate-200 bg-slate-900 border border-slate-700/50 px-8 py-3 rounded-full font-medium transition-all duration-300 hover:-translate-y-1 hover:shadow-lg hover:shadow-slate-500/20 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-950">

<span class="relative z-10 flex items-center gap-2">

  <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">

    <path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />

  </svg>

  Get Started

</span>

</button>



<style>
.shimmer-btn {

  position: relative;

  overflow: hidden;

}



.shimmer-btn::before {

  content: '';

  position: absolute;

  top: 0;

  left: -100%;

  width: 50%;

  height: 100%;

  background: linear-gradient(

    90deg,

    transparent,

    rgba(255, 255, 255, 0.2),

    transparent

  );

  transform: skewX(-20deg);

  animation: shimmer 3s infinite;

}



@keyframes shimmer {

  0% { left: -100%; }

  20% { left: 200%; }

  100% { left: 200%; }

}
</style>

React (Arka Rüzgar Yapılandırması)

Bu, Tailwind yapılandırma dosyasının (tailwind.config.js) genişletilmesiyle bir React bileşeni içinde tamamlanabilecek bir yaklaşımdır.