Gaya Active

Termasuk bagian Menguasai CSS dalam perjalanan HTML di Coddy. Pelajaran 10 dari 43.

Pseudo-class :active menerapkan gaya pada elemen saat kamu mengaktifkannya, biasanya saat kamu mengeklik elemen dan menahan tombol mouse.

Misalnya:

<button class="action-button">Click Me!</button>

Tambahkan CSS untuk mengatur gaya tombol saat aktif:

.action-button {
  background-color: blue;
}
.action-button:active {
  background-color: darkblue;
}

Saat kamu mengeklik dan menahan tombol, warnanya akan berubah dari biru menjadi biru tua. Ini memberi pengguna umpan balik visual bahwa tindakan mereka sedang terdeteksi.

Tantangan

Mudah

Tulis CSS untuk class .special-link yang menambahkan gaya berikut saat tautan aktif:

Mengubah warna teks menjadi #e74c3c
Menambahkan bayangan teks sebesar 1px 1px 2px rgba(0,0,0,0.3)

Coba sendiri

<!DOCTYPE html>
<html>
<head>
    <title>Active Pseudo-class</title>
    <style>
        /* Write your CSS here */
        
    </style>
</head>
<body>
    <a href="#" class="special-link">Interactive Link</a>
</body>
</html>