The code

Plain HTML and CSS with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.

<button class="pushable">
  <span class="shadow"></span>
  <span class="edge"></span>
  <span class="front">Push me</span>
</button>

The AI prompt

Paste this into an AI coding tool to generate the same 3d scene, then ask it to adapt the colours, text or framework to your project.

Create a 3D "pushable" button using only HTML and CSS (no JavaScript).

Structure: a <button class="pushable"> containing three spans in this order: "shadow", "edge" and "front" (the front holds the label "Push me").

Requirements:
- The button itself has no background, border or padding; position: relative.
- "shadow": absolutely fills the button, 16px radius, translucent navy, blur(4px), translateY(4px).
- "edge": absolutely fills the button, 16px radius, a dark indigo horizontal gradient that is slightly darker at the left and right ends, representing the side of the button.
- "front": position relative, 18px 46px padding, 16px radius, indigo #2506ad, white extra-bold text, raised with translateY(-6px).
- Hover: front moves to translateY(-8px) and shadow to translateY(6px) with a 0.25s transition.
- Active (pressed): front drops to translateY(-2px) and shadow to translateY(1px) with a very fast 0.03s transition, then springs back slowly (0.5s cubic-bezier(0.3, 0.7, 0.4, 1)) on release.
- A visible orange outline on :focus-visible. No transitions under prefers-reduced-motion.
- Centre it on a light grey page.

Return one HTML file with a <style> block.

How to build it, step by step

1. 1

   Split the button into three stacked layers: a shadow, an edge (the side wall) and a front face.

2. 2

   Raise the front face with translateY(-6px). The edge layer, slightly darker, shows beneath it and reads as thickness.

3. 3

   On :active, move the face down to almost meet the base. It looks and feels like a physical press.

4. 4

   Use different transition speeds: very fast going down, slower and springy coming back up. Real buttons behave this way.

5. 5

   Move the shadow in the opposite direction so it tightens when pressed and spreads when the button rises.

6. 6

   Keep a clear :focus-visible outline for keyboard users.

Customisation tips

• Change the three colours together: face, edge (about 15% darker) and edge ends (darker again).
• Increase the resting offset to -10px for an arcade-style button.
• Use a real button element so it works with the keyboard and forms.

More 3d scenes