SnippetUI
← Back to snippets

Tombol Shimmer

Komponen tombol cantik yang memancarkan pita cahaya (efek kilau) saat diarahkan dan berkala.

HTMLCSSTailwind CSSReact

Merupakan komponen tombol cantik yang menarik perhatian dengan pita cahaya (efek kilau) yang mengalir saat melayang dan berkala. Ideal untuk CTA (Call To Action) di mana Anda ingin menarik perhatian pengguna.

Pratinjau

Kasus & Fitur Penggunaan

  • Meningkatkan rasio konversi: Gerakan visual memudahkan untuk menarik perhatian pengguna, menjadikannya sempurna untuk ajakan bertindak (CTA) penting seperti tombol pendaftaran dan pembelian.

  • Animasi Kecil: Memberikan kesan canggih dengan efek kilau (pantulan cahaya) berkala yang teratur dan tidak terlalu mencolok.

  • Interaksi mikro: Tombol akan dinaikkan sedikit saat mengarahkan kursor dan bayangan akan ditambahkan untuk menekankan bahwa itu adalah elemen yang dapat diklik.

Poin-poin penting dari desain dan UX (Desain & UX)

  • Kontras dan Visibilitas: Efeknya dipertegas dengan menjalankan pita cahaya terang dengan latar belakang gelap.

  • Performa: Animasi yang menggunakan transform dan opacity meminimalkan beban gambar di browser dan menghasilkan gerakan yang mulus.

  • Aksesibilitas: Cincin fokus (focus:ring) telah diatur dengan tepat sehingga status dapat dikomunikasikan secara visual bahkan dengan pengoperasian keyboard.

Cara menyesuaikan (Panduan Kustomisasi)

  • Ubah warna: Anda dapat menyesuaikan warna lampu dengan mengubah rgba(255, 255, 255, 0.2) menjadi warna merek Anda (misalnya rgba(59, 130, 246, 0.3)).

  • Penyesuaian kecepatan animasi: Menyetel 3s dari animation: shimmer-effect 3s infinite; ke 2s akan membuatnya bergerak lebih cepat, dan menyetel 5s akan membuatnya bergerak lebih lambat.

  • Implementasi hanya dengan Tailwind: Dengan menambahkan keyframes ke tailwind.config.js, implementasi dapat diselesaikan hanya dengan kelas utilitas Tailwind tanpa menggunakan kelas khusus.

Kode implementasi (Implementasi)

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 (Konfigurasi Tailwind)

Ini adalah pendekatan yang dapat diselesaikan dalam komponen React dengan memperluas file konfigurasi Tailwind (tailwind.config.js).