Interaksi & Animasi (Pseudo-classes) 🖱️

Website lo gak boleh kayak patung. Dia harus bereaksi pas user ngelakuin sesuatu. Di CSS, kita pake tanda Titik Dua (:) buat nandain "Keadaan" (State).

1. State Wajib Hafal 🧠

Ada 4 keadaan elemen yang paling sering dipake:

A. :hover (Pas Disentuh Mouse) ✋

Ini efek paling populer. Muncul pas kursor melayang di atas elemen. (Gak berlaku di HP layar sentuh, karena gak ada kursor).

.tombol {
  background-color: blue;
  color: white;
}
 
.tombol:hover {
  background-color: darkblue; /* Pas disentuh jadi makin gelap */
  cursor: pointer; /* Kursor berubah jadi gambar jari telunjuk */
}

B. :active (Pas Ditekan) 👇

Muncul pas tombol sedang diklik (tahan mouse). Efeknya cuma sepersekian detik. Biasanya dipake buat efek tombol "mendelep" ke dalem.

 
.tombol:active {
  transform: scale(0.95); /* Tombol mengecil dikit pas ditekan */
}

C. :focus (Pas Fokus Ngetik) 🎯

Khusus buat <input> atau <textarea>. Muncul pas user lagi ngetik di dalemnya. Penting biar user tau mereka lagi ngisi kolom yang mana.

 
input {
  border: 1px solid gray;
}
 
input:focus {
  border: 2px solid blue; /* Border jadi tebal & biru */
  outline: none; /* Hilangin garis biru bawaan Chrome yang jelek */
}

D. :disabled (Pas Gak Bisa Diklik) 🚫

Buat tombol atau input yang dimatiin (misal: belum centang "Setuju Syarat & Ketentuan").

 
button:disabled {
  background-color: gray;
  cursor: not-allowed; /* Kursor jadi tanda stop ⛔ */
  opacity: 0.5; /* Jadi agak transparan */
}

2. Transition (Bikin Alus) 🎬

Coba lo pake :hover tanpa transition. Perubahannya pasti KAGET (Langsung ganti warna dalam 0 detik). Biar elegan, kita kasih efek Transisi (Perubahan pelan-pelan).

 
.tombol {
  background-color: blue;
  /* Properti | Durasi | Tipe Gerakan */
  transition: all 0.3s ease; 
}
 
.tombol:hover {
  background-color: red;
}

Artinya: "Eh tombol, kalau ada perubahan warna, jangan langsung berubah! Santai aja, 0.3 detik ya durasinya."

Lo bisa ngatur bentuk kursor mouse user pas nyentuh elemen tertentu.

.kartu-bisa-digeser {
  cursor: move;
}