Tujuan Belajar
Setelah pelajaran ini, kamu akan bisa:
- Menggunakan pseudo-class
:hover,:focus,:active - Membuat animasi transisi dengan
transition - Memberikan feedback visual yang menyenangkan pada elemen interaktif
Materi Singkat
Website yang baik memberikan feedback kepada pengguna. Ketika kamu mengarahkan kursor ke tombol dan warnanya berubah, itu memberi tahu kamu "ini bisa diklik". Efek ini disebut hover state — dan CSS membuatnya sangat mudah.
Pseudo-class
Pseudo-class adalah kondisi spesial pada elemen yang bisa ditargetkan dengan CSS:
/* Saat kursor diarahkan ke elemen */
a:hover { color: red; }
/* Saat elemen sedang difokus (keyboard atau klik) */
input:focus { border-color: blue; }
/* Saat elemen sedang diklik */
button:active { transform: scale(0.98); }
/* Elemen pertama atau terakhir dalam induknya */
li:first-child { font-weight: bold; }
li:last-child { margin-bottom: 0; }
/* Elemen genap/ganjil */
tr:nth-child(even) { background-color: #f9fafb; }Transition: Animasi Halus
transition membuat perubahan CSS terjadi secara bertahap, bukan langsung:
.tombol {
background-color: #2563eb;
color: white;
transition: background-color 0.2s ease;
}
.tombol:hover {
background-color: #1d4ed8; /* warna lebih gelap */
}Tanpa transition: warna berubah seketika saat hover.
Dengan transition: warna berubah perlahan dalam 0.2 detik.
Sintaks Transition
transition: property duration timing-function delay;
/* Contoh */
transition: color 0.3s ease;
transition: background-color 0.2s ease-in-out;
transition: all 0.3s ease; /* transisi semua properti */
/* Multiple property */
transition:
background-color 0.2s ease,
transform 0.2s ease,
box-shadow 0.2s ease;Timing functions:
ease— mulai lambat, cepat di tengah, lambat lagi (default, paling natural)linear— kecepatan konstanease-in— mulai lambat, semakin cepatease-out— mulai cepat, semakin lambat
Transform: Efek Gerakan
/* Geser */
transform: translateX(10px);
transform: translateY(-5px);
/* Perkecil/Perbesar */
transform: scale(1.05); /* 5% lebih besar */
transform: scale(0.95); /* 5% lebih kecil */
/* Putar */
transform: rotate(45deg);Sangat efektif dikombinasikan dengan transition:
.kartu {
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.kartu:hover {
transform: translateY(-4px); /* naik 4px */
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}Contoh Kode
/* Tombol dengan hover & active state */
.btn {
display: inline-block;
padding: 12px 24px;
background-color: #2563eb;
color: white;
border-radius: 6px;
text-decoration: none;
font-weight: 600;
border: none;
cursor: pointer;
transition:
background-color 0.2s ease,
transform 0.15s ease,
box-shadow 0.2s ease;
}
.btn:hover {
background-color: #1d4ed8;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
}
.btn:active {
transform: scale(0.97);
}
/* Input dengan focus state */
input {
border: 1px solid #d1d5db;
border-radius: 6px;
padding: 10px 14px;
font-size: 1rem;
outline: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
input:focus {
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
/* Kartu dengan lift effect */
.kartu {
background: white;
border-radius: 8px;
border: 1px solid #e5e7eb;
padding: 20px;
cursor: pointer;
transition:
transform 0.2s ease,
box-shadow 0.2s ease,
border-color 0.2s ease;
}
.kartu:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
border-color: #2563eb;
}
/* Tabel zebra striping */
tr:nth-child(even) {
background-color: #f9fafb;
}
tr:hover {
background-color: #dbeafe;
transition: background-color 0.15s ease;
}Tugas Kecil
Tambahkan efek hover dan transisi ke halaman profilmu:
- Semua link di navigasi: warna berubah dengan
transition: color 0.2s ease - Tombol-tombol: hover menggelapkan warna background dengan transisi halus; active sedikit mengecil (
scale(0.97)) - Kartu/section: saat hover, naik sedikit (
translateY(-2px)) dan muncul shadow lebih tebal - Input di form: saat fokus, border berubah warna ke accent dengan glow (
box-shadow) tipis - Link navigasi anchor: tambah background saat hover (seperti tab aktif)