30 CSS Hover Effects 11 / 30

CSS 3D Press Button Hover Effect

Six physically satisfying 3D button press effects — layered shadow stack, extrude push-down, isometric depth, embossed groove, beveled edge, and neumorphic press — each simulating real depth through box-shadow and transform: translateY on hover.

Pure CSS MIT licensed
Live Demo Open in tab

This is a full-page demo — interact inside the frame above, or open it in the playground for the full-screen experience.

Open in playground

The code

<div class="hv-11">
  <div class="hv-11__grid">
    <div class="hv-11__cell">
      <button class="hv-11__btn hv-11__btn--stack">Push Down</button>
      <span class="hv-11__label">shadow shrink press</span>
    </div>
    <div class="hv-11__cell">
      <button class="hv-11__btn hv-11__btn--extrude">Extrude</button>
      <span class="hv-11__label">stacked shadow layers</span>
    </div>
    <div class="hv-11__cell">
      <button class="hv-11__btn hv-11__btn--iso">Isometric</button>
      <span class="hv-11__label">angled depth edge</span>
    </div>
    <div class="hv-11__cell">
      <button class="hv-11__btn hv-11__btn--emboss">Embossed</button>
      <span class="hv-11__label">groove press</span>
    </div>
    <div class="hv-11__cell">
      <button class="hv-11__btn hv-11__btn--bevel">Beveled</button>
      <span class="hv-11__label">inset bevel edges</span>
    </div>
    <div class="hv-11__cell">
      <button class="hv-11__btn hv-11__btn--neu">Neumorphic</button>
      <span class="hv-11__label">concave surface</span>
    </div>
  </div>
</div>
.hv-11,.hv-11 *,.hv-11 *::before,.hv-11 *::after{box-sizing:border-box;margin:0;padding:0}
.hv-11 ::selection{background:#1d4ed8;color:#fff}
.hv-11{
  --bg:#0b0f1a;
  --text:#e2e8f0;
  --dim:#475569;
  --blue:#3b82f6;
  --navy:#1d4ed8;
  --slate:#64748b;
  --neu:#e2e8f0;
  font-family:'Segoe UI',system-ui,sans-serif;
  background:var(--bg);
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:60px 24px;
}
.hv-11__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:36px;
  max-width:840px;width:100%;
}
.hv-11__cell{
  display:flex;flex-direction:column;align-items:center;gap:20px;
  padding:48px 20px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
}
.hv-11__label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}

/* shared btn */
.hv-11__btn{
  padding:13px 32px;font-size:.95rem;font-weight:700;letter-spacing:.05em;
  cursor:pointer;border:none;border-radius:8px;
  transition:transform .12s,box-shadow .12s;
}

/* 1 — classic push-down */
.hv-11__btn--stack{
  background:var(--blue);color:#fff;
  box-shadow:0 6px 0 var(--navy);
  transform:translateY(0);
}
.hv-11__btn--stack:hover{transform:translateY(3px);box-shadow:0 3px 0 var(--navy)}
.hv-11__btn--stack:active{transform:translateY(6px);box-shadow:0 0 0 var(--navy)}

/* 2 — extrude stack (visible side-wall layers via 1px striations) */
.hv-11__btn--extrude{
  background:#f59e0b;color:#000;
  box-shadow:
    0 2px 0 #b45309,
    0 4px 0 #9a3412,
    0 6px 0 #7c2d12,
    0 8px 0 #5a1a08,
    0 10px 0 #3d1004,
    0 14px 18px rgba(0,0,0,.55);
  transform:translateY(0);
}
.hv-11__btn--extrude:hover{
  transform:translateY(8px);
  box-shadow:
    0 1px 0 #b45309,
    0 2px 0 #9a3412,
    0 3px 6px rgba(0,0,0,.5);
}

/* 3 — isometric */
.hv-11__btn--iso{
  background:#10b981;color:#fff;
  box-shadow:4px 4px 0 #065f46,5px 5px 0 #064e3b;
  transform:translate(0,0);
  transition:transform .12s,box-shadow .12s;
}
.hv-11__btn--iso:hover{
  transform:translate(4px,4px);
  box-shadow:0 0 0 #065f46;
}

/* 4 — embossed groove (deeply recessed engraving, no platform shadow) */
.hv-11__btn--emboss{
  background:#1f2937;color:#9ca3af;
  text-shadow:0 -1px 0 #000,0 1px 0 rgba(255,255,255,.08);
  box-shadow:
    inset 0 3px 6px rgba(0,0,0,.7),
    inset 0 -2px 4px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(255,255,255,.03);
}
.hv-11__btn--emboss:hover{
  color:#e5e7eb;
  box-shadow:
    inset 0 4px 10px rgba(0,0,0,.9),
    inset 0 -3px 6px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.04);
}

/* 5 — beveled (strong dual-edge chamfer, clearly visible top/bottom bevels) */
.hv-11__btn--bevel{
  background:linear-gradient(180deg,#8b5cf6 0%,#7c3aed 50%,#5b21b6 100%);
  color:#fff;
  text-shadow:0 -1px 0 rgba(0,0,0,.4);
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.4),
    inset 3px 0 0 rgba(255,255,255,.15),
    inset -3px 0 0 rgba(0,0,0,.25),
    inset 0 -4px 0 rgba(0,0,0,.45),
    0 4px 0 #3c1a78,
    0 6px 8px rgba(0,0,0,.4);
}
.hv-11__btn--bevel:hover{
  transform:translateY(2px);
  background:linear-gradient(180deg,#7c3aed 0%,#6d28d9 50%,#4c1d95 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.25),
    inset 2px 0 0 rgba(255,255,255,.1),
    inset -2px 0 0 rgba(0,0,0,.3),
    inset 0 -3px 0 rgba(0,0,0,.5),
    0 2px 0 #3c1a78,
    0 3px 4px rgba(0,0,0,.4);
}

/* 6 — neumorphic */
.hv-11__btn--neu{
  background:#e2e8f0;color:#334155;
  box-shadow:
    5px 5px 10px #b8bec9,
    -5px -5px 10px #ffffff;
}
.hv-11__btn--neu:hover{
  box-shadow:
    inset 4px 4px 8px #b8bec9,
    inset -4px -4px 8px #ffffff;
}

@media(max-width:640px){.hv-11__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:400px){.hv-11__grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  .hv-11__btn{transition:none!important}
}

How this works

3D press depth is created by pairing a positive translateY(0) rest state with a negative-offset box-shadow that simulates a raised platform casting a downward shadow. On hover (and :active), translateY(3px) moves the button down while the box-shadow shrinks from 0 6px 0 var(--shadow) to 0 3px 0 var(--shadow) — the shrinking shadow and downward motion combine to create the illusion the button is physically pressing into the surface.

The extrude variant uses color-graduated stacked box-shadow layers — 0 2px 0 #b45309, 0 4px 0 #9a3412, 0 6px 0 #7c2d12, 0 8px 0 #5a1a08, 0 10px 0 #3d1004 — each layer a progressively darker shade, so the side wall reads as a true 3D extrusion with bottom-edge shadowing rather than a flat slab. The embossed variant uses only inset box-shadows with no platform shadow, making the button look carved into the surface; the beveled variant adds a linear-gradient body plus four-sided inset edges (light top + sides, dark bottom) to render a true chamfered bevel; and the neumorphic variant uses two outer box-shadows — one dark, one light — to create a soft pillow that inverts to inset on press for the concave depression effect.

Customize

  • Increase button height by adding more layers to the stacked box-shadow — each additional 1px step adds one pixel of perceived 3D depth.
  • Change the platform color by editing the bottom box-shadow color — a warm dark-brown under a tan button reads as wood; dark gray under white reads as concrete.
  • Add a transition on :active state separately with a shorter duration (.05s) than the hover transition (.15s) for a snappier physical press feel.
  • Combine the translateY with a slight scale(0.98) for a compression feel — the button appears to squash inward as it presses down.
  • Apply the effect to icon buttons by removing the text label and sizing the button as a square — works equally well as a square toolbar button or round FAB.

Watch out for

  • The translateY shift and shadow size must be calibrated exactly — if translateY moves more pixels than the shadow shrinks, a ghost gap appears between the button face and its platform.
  • Neumorphic effects only work against their specific background color — the highlight and shadow colours are mixed from the background; changing the page background breaks the illusion.
  • Deep box-shadow stacks (0 8px 0) can overflow parent elements — ensure parent containers have overflow: visible or sufficient padding beneath the button.

Browser support

ChromeSafariFirefoxEdge
60+ 10.1+ 55+ 60+

Multiple box-shadow values and translateY are universally supported — no compatibility issues.

More from 30 CSS Hover Effects

CSS Card Flip Hover EffectCSS Glassmorphism Card Hover EffectCSS Spotlight Card Hover EffectCSS Slide Reveal Card Hover EffectCSS Stack Lift Card Hover EffectCSS Zoom Pan Image Hover EffectCSS Color Channel Split Hover EffectCSS Duotone Image Hover EffectCSS Curtain Reveal Image Hover EffectCSS Ken Burns Image Hover EffectCSS Image Tilt Depth Hover EffectCSS Underline Slide Nav Hover Effect
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →