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.

Teste seus conhecimentos

Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.

Teste seus conhecimentos

Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.

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)

Folha de consulta

A pseudo-classe :active aplica estilos a um elemento quando ele está sendo ativado pelo usuário, geralmente ao clicar e segurar o botão do mouse pressionado.

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

Isso fornece um feedback visual de que a ação do usuário está sendo registrada.

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>

Teste seus conhecimentos

Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.