CSS :active playground

Explore :active with links and buttons. Change simple styles that apply while the user is pressing the element, then copy the generated CSS.

Press and hold the button or link to see the :active state.

Press link

For links, the :active rule should come after :hover when both have the same specificity.

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