Efek hover

Pelajaran 7 dari 8 dalam kursus Proyek CSS: Tombol Keren di Coddy.

Mari buat beberapa efek saat tombol disorot!

Untuk mengubah tombol saat disorot, kita menggunakan pseudo-class :hover,

.fancyButton:hover {
	background-color: red;
}

Dalam contoh di atas, tombol kita akan menjadi merah saat disorot!

Untuk membuat transisinya halus, gunakan:

.fancyButton {
	...
	transition: all 0.2s;
}

Kamu bisa mencoba-coba durasi transisi (0.2s).

Tantangan

Mudah

Tambahkan efek hover pada tombolmu agar tampil menarik!

Tugas yang harus dilakukan:

Tambahkan properti transition pada tombolmu, dengan durasi pilihanmu, maksimal 1 detik.
Tambahkan opacity: 0.8; pada efek hover tombolmu.

Properti opsional dan yang disarankan untuk diubah saat hover:

bayangan (box-shadow)
warna latar belakang

Coba sendiri

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Tulis kode HTML di sini -->
    </body>
</html>

Semua pelajaran di Proyek CSS: Tombol Keren

1Pengantar

Pengantar Bagian HTML

2Proyek CSS

Efek hover Pelajaran proyek

Penataan akhir

Latihan sendiri: Playground Web