Estilos Ativos

Parte da seção CSS Mastery do Journey de HTML da Coddy — lição 10 de 43.

A pseudo-classe :active aplica estilos a um elemento quando ele está sendo ativado pelo usuário, geralmente quando um usuário clica em um elemento e mantém o botão do mouse pressionado.

Por exemplo:

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

Adicione CSS para estilizar o botão quando ele estiver ativo:

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

Quando você clica e mantém pressionado o botão, ele mudará de cor de azul para azul escuro. Isso fornece aos usuários um feedback visual de que sua ação está sendo registrada.

Desafio

Fácil

Escreva o CSS para a classe .special-link que adiciona os seguintes estilos quando o link estiver ativo:

Altera a cor do texto para #e74c3c
Adiciona uma sombra de texto de 1px 1px 2px rgba(0,0,0,0.3)

Experimente você mesmo

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