3D Press Button

Customize this 3D press button design and use it on your own website.

It's a chunky button that sits up off the page and pushes down like a real key when you click it.

You can set how deep it sits and how sharp the shadow under it looks.

Copied 23 times.

Customize the prompt

What it does

The 3D press button looks like a chunky key sitting up off the page. Click it and it goes down, clicks, and comes right back up.

That little bit of feedback just feels good, and that is the whole point. It fits playful brands, games and kids' pages, where a flat button feels too serious.

Want it on your own site? One copy, one paste, and your AI builds the same push into your existing buttons.

  • The depth is a darker shade of your own button color, so it always matches your brand.
  • Hover lifts it a little, a click pushes it flat, and the space it takes on the page never changes.
  • No image, no rebuilding, your own buttons just get the new look.

How it works

  1. Slide the depth to change its depth from a small step to a full arcade key.

  2. Pick the shadow edge, sharp for the arcade feel, soft and friendly, or let your AI match it to your site.

  3. Copy the prompt, that is the text that will explain to your AI how to build it.

  4. Paste it into your AI, Copilot, Grok, or whichever one you use.

  5. Tell your AI where the style goes when it asks, to pick if you want this style for every button or just a few.

  6. Let your AI add the look to the buttons you already have.

  7. Click one to check it goes down, clicks, and comes right back up.

  8. Hover one too, it should rise a little with a longer shadow.

  9. Try it on a real page of yours, it has to sit right with your other buttons.

What you can customize

  • Depth: shallow stays calm and grown-up, deep turns every click into an arcade button. For a raised button that grabs attention with light instead of a push, see the shine CTA button.
  • Shadow style: hard edge looks sharp and game-like, soft edge blurs a little for a friendlier feel, and adapt to my project lets your AI copy the shadow your site already uses. For something quieter, a button whose icon slides in on hover moves the label over instead.
  • Color, size, and shape stay yours, because your AI builds the depth into the buttons you already have. If you want a button that stays still when clicked, a button that pulses with light gets noticed without moving.

Found a 3D button you like somewhere else? Our extension copies designs from any website, buttons included.

You'll also like