:active es una pseudo-clase que representa cuando un elemento (ej. button) es activado por el usuario. La acción se detona cuando se presiona el botón principal del mouse sobre el elemento.
button:active {
transform: scale(1.1);
}
Por lo general solo se ve durante una fracción de segundo y proporciona retroalimentación visual del click del usuario. Normalmente dicha pseudo-clase se utiliza en elementos <a> y <button>.
Uso
<button class="button">Click me!</button>.button {
padding: 1rem 1.5rem;
background: white;
color: #282B39;
border-radius: 5px;
outline: 0;
border: 0;
text-decoration: none;
text-transform: uppercase;
box-shadow: 4px 4px 0 #00A8E8;
cursor: pointer;
transition: 0.3s;
}
.button:active {
transform: translate(4px, 4px);
box-shadow: none;
}Hay que tener en cuenta la anulación de estilos de otras pseudo-clases. Es decir, si se tiene :link, :visited o :hover después de :active. Los estilos se anulan y no funcionarán correctamente, en cambio hay que seguir el orden LVHA:
/* L */
a:link
color: red;
}
/* V */
a:visited {
color: yellow;
}
/* H */
a:hover {
color: green;
}
/* A */
a:active {
color: blue;
}
De esta manera se garantiza que los estilos no colisionen entre ellos y funcionen correctamente.