Playground de :hover en CSS

Explora :hover con enlaces y botones. Cambia estilos sencillos que se aplican al pasar el puntero sobre el elemento y copia el CSS generado.

Pasa el puntero sobre el botón o el enlace para ver el estado :hover.

Hover enlace

En enlaces, declara :hover después de :link y :visited, pero antes de :active cuando tienen la misma especificidad.

HTML

<div class="hover-demo">
  <button type="button">Hover button</button>
  <a href="#">Hover 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:hover]:text-[#17142b] [&_button:hover]:bg-[#8be9fd] [&_button:hover]:scale-104 [&_button:hover]:no-underline">
  <button type="button">Hover button</button>
  <a href="#">Hover link</a>
</div>

CSS

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

.hover-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;
}

.hover-demo button:hover {
  color: #17142b;
  background-color: #8be9fd;
  scale: 1.04;
  text-decoration: none;
}

.hover-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:hover {
    color: #17142b;
    background-color: #8be9fd;
    scale: 1.04;
    text-decoration: none;
  }
}