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>

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