Pseudo-classe :active
A pseudo-classe :active é utilizada para selecionar e estilizar um elemento enquanto ele está sendo ativado ou clicado pelo usuário. Essa pseudo-classe é frequentemente empregada para fornecer feedback visual imediato durante a interação do usuário.
Exemplo com a Tag A:
Considere o seguinte trecho de código HTML com um link:
<h1>Lorem, ipsum.</h1>
<p>
Lorem ipsum dolor <a href="#">sit amet</a>, consectetur adipisicing elit. Cupiditate quos
nobis labore nemo, laborum ipsa deleniti ut dolor doloremque laudantium?
</p>O código CSS a seguir aplicará estilos específicos enquanto o link estiver sendo clicado:
a:active {
color: #ff0000; /* Vermelho */
transform: scale(0.9);
}Neste exemplo, quando o usuário clicar no link, ele ficará vermelho e sofrerá uma leve redução de escala.
Exemplo com a Tag BUTTON
Considere o seguinte código HTML:
<button>Clique-me</button>O código CSS abaixo aplicará estilos específicos quando o botão estiver sendo clicado:
button:active {
background-color: #ccc;
color: white;
}Neste exemplo, o botão terá um fundo cinza claro e texto branco enquanto estiver sendo clicado.