B.6.2. Active

Selanjutnya, kita akan membahas mengenai :active. Pseudo-class ini diterapkan pada elemen ketika elemen tersebut sedang ditekan atau diklik. Contohnya seperti tombol yang memberikan feedback visual saat pengguna mengkliknya.

Misalnya, kita akan membuat tombol yang saat diklik akan berubah menjadi warna merah. Berikut contohnya:

index.html

<button class="some-button">Register</button>

style.css

.some-button {
  padding: 0.75rem 1.5rem;
  background-color: blueviolet;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  color: #fff;
}

.some-button:active {
  background-color: pink;
  color: #000;
}

Hasil dari kode di atas akan terlihat seperti gambar di bawah ini.

Untuk melihat hasilnya teman-teman bisa arahkan kursor nya ke elemen button tersebut lalu coba teman-teman klik kanan dan tahan, maka warna background akan berubah menjadi warna pink dan warna tulisannya akan berubah menjadi hitam.

Pseude class :active bisa teman-teman gunakan pada elemen lain seperti <a>, <div>, dan lain-lain.

---

info

Source code pada chapter ini tersedia di GitHub
https://github.com/mframadann/webdev-dasar-example/tree/main/b-css/chapter-B.6-pseude-class/B.6.2-active

Mmm apakah halaman ini membantu🤔?

Ayo share tentang pengalaman belajarmu!