: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;
}
Ejemplo en vivo

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.

Recursos