3D CSS buttons that press down
A 3D button gets its depth from a solid, unblurred shadow directly underneath it. When you click, the button moves down and the shadow shrinks by the same amount, so it feels like a real key being pressed.
Get started
Subscribe
Confirm
Claim reward
Level up
Order now
Continue
Enter
Download
Tap me
Save changes
Tips for 3D CSS buttons
Make the shadow a darker shade of the button colour, not black. Animate transform: translateY() rather than margins so the press is smooth and does not shift the layout. A short transition (80–120ms) on :active feels the most tactile.
Click any button above to get its CSS and HTML, or open the editor to tune the colours, font, shadows and hover animation and copy your own version.