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>

Tailwind CSS

Algunas clases con valores arbitrarios pueden sustituirse por clases nativas, según el valor y la configuración de Tailwind CSS.

<div class="flex flex-wrap gap-4 *:inline-flex *:items-center *:justify-center *:min-inline-36 *:py-3 *:px-4 *:border *:border-solid *:border-[color-mix(in_srgb,_currentColor_22%,_transparent)] *:rounded-full *:bg-white *:text-[#24203a] *:[font:inherit] *:font-bold *:no-underline *:cursor-pointer *:[transition:background-color_0.2s_ease,_color_0.2s_ease,_scale_0.2s_ease] [&_button:active]:text-[#ffffff] [&_button:active]:bg-[#7057ff] [&_button:active]:scale-96 [&_button:active]:no-underline">
  <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;
  }
}