.action:active { transform: translateY(1px); }A one-pixel shift provides brief press feedback.
LESSON 82 OF 100
Confirm pressing with :active
Move the button subtly while it is being activated.
STEP 1 · LEARN
How it works
:active matches while an element is being activated, usually between pressing and releasing the input device. The visual transform does not change document order.
.action { transform: translateY(1px); }A permanent transform no longer communicates the moment of activation.
STEP 2 · APPLY
Your exercise
Apply transform: translateY(1px) only to .action:active.
index.htmlCSS
Safe resultisolated
The draft stays only in this browser.HTML and CSS allowed · scripts and network blocked
STEP 4 · CHECK
What needs to pass
0%not checked
- ○The active state shifts the button by 1px.
- ○The target element is present in the page.
Explain the solution logic
The pseudo-class limits the transform to the active state without JavaScript or structural movement.