CSS :hover playground

Explore :hover with links and buttons. Change simple styles that apply when the pointer is over the element, then copy the generated CSS.

Move the pointer over the button or link to see the :hover state.

Hover link

For links, declare :hover after :link and :visited, but before :active when they have the same specificity.

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