Aktif Stiller

Coddy'nin HTML Journey'sinin CSS Mastery bölümünün bir parçası — ders 10 / 43.

:active sözde sınıfı, bir öğe kullanıcı tarafından etkinleştirildiğinde (genellikle bir kullanıcı bir öğeye tıkladığında ve fare düğmesini basılı tuttuğunda) o öğeye stiller uygular.

Örneğin:

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

Düğme aktif olduğunda stil vermek için CSS ekleyin:

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

Butona tıklayıp basılı tuttuğunuzda, rengi maviden koyu maviye (darkblue) dönüşecektir. Bu, kullanıcılara eylemlerinin kaydedildiğine dair görsel bir geri bildirim sağlar.

Görev

Kolay

.special-link sınıfı için, bağlantı aktif olduğunda aşağıdaki stilleri ekleyen CSS'i yazın:

Metin rengini #e74c3c olarak değiştirir
1px 1px 2px rgba(0,0,0,0.3) değerinde bir metin gölgesi ekler

Kendin dene

<!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>