Active

You might say

When someone presses the button, make it feel like it's being pushed in.

Show that a control is being pressed right nowThe active state appears during the press between pointer down and release. A small change in color, depth, or scale confirms that the input was received. It is different from a selected item that stays chosen after the interaction.

:active

List items press too Hold to see the sink (scale .96), release to bounce back; the right button lacks active and feels dead

You can say this to an AI Agent

Add a brief pressed state to the submit button: darken or lower it slightly during pointer or keyboard press, then restore on release, leave, or cancel. Do not turn it into persistent selection or shift surrounding layout.

When to use it

Give a button press physical feedback
Button→Button
Show a menu item while it is being clicked
SubmitSubmit
Respond to a pointer or key press
Immediate press feedback
Complete the hover-focus-active state set
List item oneList item two (pressed)List item three

When NOT to use it

Use active styling as the permanent selected state
HoverPressed
Scale a control so far that the layout jumps
Confirm
Remove all feedback during a press
Button
Make the pressed state look disabled
Pressed statePressed is temporary; it cannot replace a persistent selected state.

Anatomy

Button👇 Press instantlyButton

How it looks when nothing is pressed

The instant between pointer-down and release

scale .97 or a darker color — the feeling of “it registered”

Variants

Scale

ButtonButton

The standard press feedback for buttons

Darken

ButtonButton

The fallback when scaling isn't an option

Inset

Button

Physical feel for toggles and levers

Typical use cases

Button press

Order Total¥ 199.00

On press: scale(.97) + darker color — you can feel the click

Navigation item

Account & Security›

Notifications›

Privacy›

List item press: darker background + slight sink

Icon control

Favorites

Messages

Settings

Card action

⏮ ▶ ⏭

Icon button press: shrinks with a ripple

Recommended tool

Web fine-tuning tool · Selector Pro

Select page elements for precise AI edits

Click a button, text, or card, note the change, then copy its exact location to AI.

Open Selector Pro website

A submit button shows no change between pointer down and release, so users often click twice. What feedback should be added?

A. Change color or position slightly while pressed, restore on release, and support keyboard activationB. Keep the pressed style after the first click until the user clicks againC. Keep only the hover color and add no press-to-release feedback because hover already shows it is clickable