Estilos de estado activo

Parte de la sección CSS Mastery del Journey de HTML de Coddy — lección 10 de 43.

La pseudoclase :active aplica estilos a un elemento cuando está siendo activado por el usuario, típicamente cuando un usuario hace clic en un elemento y mantiene presionado el botón del ratón.

Por ejemplo:

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

Añade CSS para dar estilo al botón cuando esté activo:

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

Cuando haces clic y mantienes presionado el botón, cambiará de color de azul a azul oscuro. Esto proporciona a los usuarios una respuesta visual de que su acción está siendo registrada.

Ponte a prueba

Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.

Ponte a prueba

Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.

Desafío

Fácil

Escribe el CSS para la clase .special-link que añada los siguientes estilos cuando el enlace esté activo:

Cambia el color del texto a #e74c3c
Añade una sombra de texto de 1px 1px 2px rgba(0,0,0,0.3)

Hoja de referencia

La pseudoclase :active aplica estilos a un elemento cuando el usuario lo está activando, normalmente al hacer clic y mantener presionado el botón del ratón.

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

Esto proporciona una respuesta visual de que la acción del usuario se está registrando.

Pruébalo tú mismo

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

Ponte a prueba

Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.