HTML + CSSButtons
3D push button
A chunky button with a solid shadow underneath that sinks all the way down when you press it.
Settings
16px
1x
Code
<button class="uv-3d">Press</button>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Buttons
Where to use it
This 3D push button feels like a real key, so it shines in playful interfaces: the “Check answer” button of a language app, the “Play” screen of a browser game or the “Next” step in a kids' learning site. Hovering lifts it a little and pressing pushes it flat against its own shadow.
The shadow is a darker shade of the main color, so medium tones work better than very dark ones. Rounded, friendly typefaces suit it. For a bank, a law firm or anything that should feel serious, choose a flatter button instead.