3D Press

The button sits on a solid edge and sinks into it when pressed, like a physical key that bottoms out.

CSS
Buttons
Click
Added 2026-10-29

AI prompt

Create a 3D press button in pure CSS. Give the button a solid bottom edge with box-shadow: 0 6px 0 a darker shade of the accent, and lift it 2px on hover (translateY(-2px), shadow 0 8px 0). On :active, translateY(6px) and set the shadow to 0 0 0 so the face drops flush with the base. Transition transform and box-shadow over 90ms ease-out so the press feels immediate, and leave a little longer on release. Keep a visible focus ring. Under prefers-reduced-motion, keep the colour change on press but drop the movement. The label reads "Start game".

Source

Demo.tsx

'use client'

import s from './demo.module.css'

export default function Press3d({ labels }: { labels: Record<string, string> }) {
  return (
    <button type="button" className={s.button}>
      {labels.cta}
    </button>
  )
}

demo.module.css

.button {
  --edge: color-mix(in oklch, var(--stage-accent) 55%, black);
  height: 52px;
  padding: 0 32px;
  border: 0;
  border-radius: var(--radius-sm);
  font: 500 var(--text-base) / 1 var(--font-body);
  white-space: nowrap;
  cursor: pointer;
  background: var(--stage-accent);
  color: var(--stage-accent-ink);
  font-weight: 600;
  box-shadow: 0 6px 0 var(--edge);
  transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out), background-color var(--dur-micro);
}

.button:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--edge); }

.button:active {
  transform: translateY(6px);
  box-shadow: 0 0 0 var(--edge);
  transition-duration: 90ms;
}

.button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 10px; }

@media (prefers-reduced-motion: reduce) {
  .button, .button:hover, .button:active { transform: none; }
  .button:active { background: var(--stage-accent-hover); }
}