Aktif Stiller

Coddy'nin HTML Journey'sinin CSS Hakimiyeti 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;
}

Düğmeye tıklayıp basılı tuttuğunuzda, rengi maviden koyu maviye değişir. Bu, kullanıcılara eylemlerinin kaydedildiğine dair görsel geri bildirim sağlar.

Görev

Kolay

Bağlantı etkin olduğunda aşağıdaki stilleri ekleyen .special-link sınıfı için CSS yazın:

Metin rengini #e74c3c olarak değiştirir
1px 1px 2px rgba(0,0,0,0.3) 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>