Active State
The visual appearance of an element while it is being pressed or activated.
Plain English
The active state is the press feedback — the visual confirmation that "yes, I clicked that." Without it, buttons feel unresponsive. With it, there is a satisfying physical sensation of pressing something. The active state should be brief (you only see it for as long as you hold the click) and slightly more extreme than the hover state — darker, scaled down, or indented — to simulate physical depression.
Technical
Triggered by the :active CSS pseudo-class. Fires on mousedown (not mouseup) and lasts while the pointer is held. On mobile, it fires on touch. Common active patterns: background-color 10–15% darker than hover, transform: scale(0.97) or scale(0.98) (the "press" effect), box-shadow reduction (the element appears to flatten on press). Pair with a very short transition (50–100ms) so the press and release feel crisp. The transition on release is slightly longer (100–150ms) for a satisfying "bounce back."
Live Demo
Button Active States
Try it — press and hold:
The active state confirms the user pressed something. Use scale + dark + no shadow.
Usage
✓ Good usage
On button press: background darkens 10% from hover state + transform: scale(0.97) — creates a satisfying physical press sensation.
✗ Bad usage
No visual difference between hover and active states — the button feels unresponsive on click.
Recommended values
- Background: 10–15% darker than hover state
- Scale: transform: scale(0.97) — subtle press sensation
- Shadow: reduce or remove shadow on active (element "presses" into surface)
- Transition: 50ms ease-in for press, 100ms ease-out for release
Common mistakes
- Active state that looks identical to hover — misses the opportunity for press feedback.
- Active state that is too dramatic (scale: 0.8) — feels broken, not pressed.
- Slow transition on active state — the active state should feel instant, not animated.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Primary button active state: background 10% darker than hover + transform: scale(0.97) + reduced box-shadow. Transition: 50ms ease-in on press, 100ms ease-out on release. Cards: translateY(0) and softer shadow on active (cancels the hover lift).