Active

Element is being activated/interacted with.

html

<div class="act-demo">
  <button class="act-btn" style="--accent:#F5C2E0;border-radius:10px;" type="button">Press and hold</button>
  <p class="act-demo__hint"><span class="act-demo__tag act-demo__tag--live">real :active</span> click and hold the button · <span class="act-demo__tag act-demo__tag--forced">forced</span> the toggle above</p>
</div>
<style>
.act-demo { width: 280px; box-sizing: border-box; font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 20px; border-radius: 12px; text-align: center; }
.act-btn { font: 700 15px system-ui, sans-serif; padding: 12px 24px; border: 2px solid var(--accent); background: var(--accent); color: #241430; cursor: pointer; transform: translateY(0); box-shadow: 0 4px 0 color-mix(in srgb, var(--accent) 60%, #241430); }
@media (prefers-reduced-motion: no-preference) {
.act-btn { transition: transform .08s, box-shadow .08s; }
}
.act-btn:active, .act-btn--forced { transform: translateY(4px); box-shadow: 0 0 0 transparent; }
.act-demo__hint { margin: 14px 0 0; font-size: 11px; color: #241430888; }
.act-demo__tag { font-weight: 700; }
.act-demo__tag--live { color: #241430; }
.act-demo__tag--forced { color: #241430; }
</style>

tailwind

<div class="w-[280px] box-border font-sans text-sm text-[#241430] bg-[#FAF7F2] p-5 rounded-xl text-center">
  <button type="button" class="act-tw-btn font-bold text-[15px] px-6 py-3 border-2 cursor-pointer text-[#241430] motion-safe:transition-transform active:translate-y-1" style="border-color:#F5C2E0;background:#F5C2E0;border-radius:10px;">Press and hold</button>
  <p class="m-0 mt-3.5 text-[11px] text-[#241430]/55"><strong>real :active</strong> click and hold the button · <strong>forced</strong> the toggle above</p>
</div>
<style>
.act-tw-btn--forced { transform: translateY(4px); }
</style>

react

export function ActiveState({
  label = "Press and hold",
  accent = "#F5C2E0",
  force = false,
  radius = 10,
}) {
  return (
    <div style={{ width: 280, boxSizing: "border-box", font: "14px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 20, borderRadius: 12, textAlign: "center" }}>
      <button
        type="button"
        style={{
          font: "700 15px system-ui, sans-serif", padding: "12px 24px", borderRadius: radius,
          border: `2px solid ${accent}`, background: accent, color: "#241430", cursor: "pointer",
          transform: force ? "translateY(4px)" : "translateY(0)",
          boxShadow: force ? "none" : `0 4px 0 color-mix(in srgb, ${accent} 60%, #241430)`,
        }}
      >
        {label}
      </button>
      <p style={{ margin: "14px 0 0", fontSize: 11, color: "#241430888" }}><strong>real :active</strong> click and hold the button · <strong>forced</strong> the toggle prop</p>
    </div>
  );
}