htmlcssjavascriptanimasikomponenPemula10 mnt baca

Tombol dengan Animasi Keren

Berbagai efek tombol: ripple, geser warna, dan bayangan bergerak saat hover.

Kenapa Tombol Butuh Animasi?

Tombol adalah elemen paling sering diklik. Animasi kecil memberi feedback "klikmu diterima" dan membuat web terasa hidup. Perhatikan tombol di aplikasi favoritmu: hampir pasti ada efek hover atau tekan.

Tiga Efek yang Dibangun

1. Ripple (gelombang): Saat diklik, lingkaran menyebar dari titik klik seperti tetesan air. Caranya: JS membuat <span> di posisi klik, CSS menganimasikan scale dari 0 ke besar lalu menghapus span.

2. Geser warna: Background tombol "terisi" dari kiri ke kanan saat hover. Triknya: background: linear-gradient dengan background-size: 200% lalu geser background-position saat hover.

3. Tekan (press): Saat diklik tombol sedikit mengecil (transform: scale(0.96)) memakai pseudo-class :active. Ini meniru tombol fisik.

Prinsip Animasi yang Baik

  • Cepat: 150-300ms. Lebih lama terasa lemot.
  • Halus: pakai ease atau cubic-bezier, jangan linear untuk gerakan UI.
  • Bermakna: animasi memberi informasi (diklik, loading, berhasil), bukan sekadar hiasan.

Kesalahan Umum

  • Menganimasikan width/height yang memicu layout ulang dan patah-patah (animasikan transform dan opacity yang diakselerasi GPU).
  • Animasi terlalu banyak sekaligus hingga mengganggu.
  • Efek hover tidak berguna di layar sentuh (pastikan tombol tetap jelas tanpa hover).
Live Playground
export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}
Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Tantangan: Tombol Loading

Buat tombol keempat "Kirim Data" yang saat diklik berubah menjadi spinner loading selama 2 detik (tombol disabled), lalu berubah menjadi "✓ Terkirim!" berwarna hijau.