Playground de :active en CSS

Explora :active con enlaces y botones. Cambia estilos sencillos que se aplican mientras el usuario mantiene pulsado el elemento y copia el CSS generado.

Mantén pulsado el botón o el enlace para ver el estado :active.

Pulsar enlace

En enlaces, el estilo :active debe aparecer después de :hover cuando tienen la misma especificidad.

HTML

<div class="active-demo">
  <button type="button">Press button</button>
  <a href="#">Press link</a>
</div>

CSS

.active-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.active-demo :where(a, button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 9rem;
  padding-block: 0.75rem;
  padding-inline: 1rem;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  border-radius: 999px;
  background-color: white;
  color: #24203a;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, scale 0.2s ease;
}

.active-demo button:active {
  color: #ffffff;
  background-color: #7057ff;
  scale: 0.96;
  text-decoration: none;
}

.active-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;

  :where(a, button) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 9rem;
    padding-block: 0.75rem;
    padding-inline: 1rem;
    border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    border-radius: 999px;
    background-color: white;
    color: #24203a;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, scale 0.2s ease;
  }

  button:active {
    color: #ffffff;
    background-color: #7057ff;
    scale: 0.96;
    text-decoration: none;
  }
}