GODRICH
#css-animation#button#loader#transition#scroll#dashboard#ui#design-trends

9 CSS 3D Button Effects — Copy-paste Ready

· Godrich · 9 items · 23 min read

ButtonsVanilla JSSCSSHoverClickCTAHero section

Nine css 3d button effect demos. What turns a flat button into depth? A cursor-driven angle value sets rotateX/rotateY, a tilt-magnitude value sets a rim

Button a Cursor-coordinate Value Rotates01 pointer-tilt-3d-cursor-rotate Button Highlight a Light-angle Value Sweeps Across02 pointer-tilt-3d-specular-sweep Button Where a Tilt Value Stacks Shadow Layers03 pointer-tilt-3d-shadow-stack Button a Depth Value Pushes Only the Icon Apart04 pointer-tilt-3d-icon-parallax Button Where an Angle Value Lights Up the Edge05 pointer-tilt-3d-edge-bevel Button Where a Press-depth Value Springs Back06 pointer-tilt-3d-press-release-spring Button Whose Grid Pattern Shifts With Every Tilt Value07 pointer-tilt-3d-grid-parallax Rim Glow Whose Intensity a Tilt-magnitude Value Sets08 pointer-tilt-3d-rim-glow Button Whose Value Drifts on Its Own When No Pointer Is Near09 pointer-tilt-3d-idle-drift

Auto-plays · click a tile to jump to its section · all nine in one zip

One Pointer Position, Nine Different Jobs

Every one of these nine buttons starts from the same pointer position — how far the cursor sits from center, read once per move and eased toward a target inside a requestAnimationFrame loop. What changes from pattern to pattern is only the single calculation each render() runs on top of that eased value: a coordinate rotates the button, a magnitude sets a glow's reach, a held-time value springs the whole thing back on release. None of these nine is a css 3d flip button hover effect that spins 180° to a back face — every button here stays front-facing and only tilts toward wherever the pointer is.

01Button a Cursor-coordinate Value Rotates

A cursor-coordinate pair drives rotateX/rotateY directly, eased through LERP = 0.16 so the tilt trails the pointer instead of snapping to it. The same pair also slides a radial sheen across the face and stretches the drop shadow's blur and offset with the tilt's depth, so the highlight and the shadow always agree on which corner is lifted. Without a real pointer, a two-axis Lissajous path drives the same render() call, so the auto demo and the headless measurement run identical math.

Button a Cursor-coordinate Value Rotates
Open in a new tab

01 · Button a Cursor-coordinate Value Rotates — Measured area 3.144% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

MAX_DEGLERProtateX
  var MAX_DEG = 14;          // max rotation angle once the cursor reaches the button's edge
  var LERP = 0.16;           // inertial lerp factor — how fast the value catches up to its target
  var targetNX = 0, targetNY = 0;
  var curNX = 0, curNY = 0;
  var hasPointer = false;
  var clickTimer = null;

  function clamp(v, lo, hi) { return Math.max(lo, Math.min(hi, v)); }

  // synthetic coordinate pair for when no pointer is present (auto demo, headless measurement) — a Lissajous path with the two axes out of phase
  function syntheticTarget(t) {
    return [Math.sin(t * 1.15), Math.sin(t * 0.82 + 1.05)];
  }

  function render(nx, ny) {
    var rotY = nx * MAX_DEG;
    var rotX = -ny * MAX_DEG;
    btn.style.transform = 'rotateX(' + rotX.toFixed(2) + 'deg) rotateY(' + rotY.toFixed(2) + 'deg)';
    var sx = 50 + nx * 34, sy = 50 + ny * 34;
    sheen.style.background = 'radial-gradient(circle at ' + sx.toFixed(1) + '% ' + sy.toFixed(1) + '%, rgba(255,247,230,.5), rgba(255,247,230,0) 58%)';
    var depth = Math.min(1, Math.sqrt(nx * nx + ny * ny));
    btn.style.boxShadow = '0 ' + (10 + depth * 16).toFixed(1) + 'px ' + (18 + depth * 22).toFixed(1) + 'px rgba(8,6,12,' + (0.30 + depth * 0.16).toFixed(2) + ')';
  }

02Button a Light-angle Value Sweeps a Highlight Across

A pointer angle, not a coordinate pair, drives this one: render(angle, mag) turns that angle into a conic-gradient sweep SWEEP_WIDTH degrees wide, plus a small rotation so the face still tilts toward the cursor. shortestDelta() eases the angle the short way around the circle, so the sweep never spins the long way past the 0/360 seam. Magnitude alone controls how far the floor shadow shifts and how bright the background glow gets, keeping direction and intensity as two separate values.

Button Highlight a Light-angle Value Sweeps Across
Open in a new tab

02 · Button Highlight a Light-angle Value Sweeps Across — Measured area 12.364% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

SWEEP_WIDTHLERPconic-gradient
  function render(angle, mag) {
    var rotY = Math.cos(angle * Math.PI / 180) * mag * 10;
    var rotX = Math.sin(angle * Math.PI / 180) * mag * -10;
    btn.style.transform = 'rotateX(' + rotX.toFixed(2) + 'deg) rotateY(' + rotY.toFixed(2) + 'deg)';
    var a0 = (angle - SWEEP_WIDTH / 2).toFixed(1);
    var a1 = angle.toFixed(1);
    var a2 = (angle + SWEEP_WIDTH / 2).toFixed(1);
    // widened contrast/width so the sweep streak crosses the whole face — the SWEEP_WIDTH angle value itself stays fixed
    var alpha = (0.46 + mag * 0.54).toFixed(2);
    sweep.style.background = 'conic-gradient(from ' + a0 + 'deg at 50% 50%, rgba(23,20,26,0), rgba(23,20,26,' + alpha + ') ' + (SWEEP_WIDTH / 2).toFixed(1) + 'deg, rgba(23,20,26,0) ' + SWEEP_WIDTH.toFixed(1) + 'deg)';
    sweep.style.opacity = String(0.8 + mag * 0.4);
    // floor shadow tied to the tilt — it shifts toward the lean direction to build up area
    var floorShift = Math.cos(angle * Math.PI / 180) * mag * 34;
    var floorScale = 1 + mag * 0.28;
    floor.style.transform = 'translateX(' + floorShift.toFixed(1) + 'px) scaleX(' + floorScale.toFixed(2) + ')';
    floor.style.opacity = (0.08 + mag * 0.88).toFixed(2);
    // background glow layer — moved with percentage coordinates only, so there's no risk of overflow (no transform used)
    var gx = (50 + Math.cos(angle * Math.PI / 180) * mag * 38).toFixed(0);
    var gy = (50 + Math.sin(angle * Math.PI / 180) * mag * 38).toFixed(0);
    glow.style.background = 'radial-gradient(circle at ' + gx + '% ' + gy + '%, rgba(255,255,255,' + (0.18 + mag * 0.5).toFixed(2) + '), rgba(255,255,255,0) 60%)';
  }

03Button Where a Tilt Value Stacks Three Shadow Layers

The same nx/ny pair that rotates the button also drives a small loop that builds three box-shadow layers, each offset further opposite the tilt and each a little more blurred and transparent than the last. Because the loop computes offset, blur, and alpha from one loop index, the three layers always read as a single receding stack rather than three unrelated shadows. Nothing here needs an extra shadow element — the whole string is built and set once per frame.

Button Where a Tilt Value Stacks Shadow Layers
Open in a new tab

03 · Button Where a Tilt Value Stacks Shadow Layers — Measured area 6.126% · moving frames 22/23Original by GODRICH · SCSS and React ship in the zip · See the password

MAX_DEGLERPboxShadow
  // three shadow layers — offset grows opposite the lean, and blur/alpha differ per layer so depth reads clearly
  function render(nx, ny) {
    var rotY = nx * MAX_DEG;
    var rotX = -ny * MAX_DEG;
    btn.style.transform = 'rotateX(' + rotX.toFixed(2) + 'deg) rotateY(' + rotY.toFixed(2) + 'deg)';
    var ox = -nx, oy = -ny;
    var layers = [];
    for (var i = 1; i <= 3; i++) {
      var d = i * 7;
      var blur = i * 9;
      var alpha = (0.22 - i * 0.03).toFixed(2);
      layers.push((ox * d).toFixed(1) + 'px ' + (oy * d + i * 3).toFixed(1) + 'px ' + blur + 'px rgba(23,20,26,' + alpha + ')');
    }
    btn.style.boxShadow = layers.join(', ');
  }

04Button a Depth Value Pushes the Icon Further Than the Label

Icon and label sit on the same coordinate pair but read two different depth multipliers — ICON_DEPTH = 22 against LABEL_DEPTH = 8 — so the icon visibly detaches from the text as the pointer moves, even though both receive identical nx, ny values each frame. Only translate3d moves here; the button itself picks up a much smaller, separate rotation, so the parallax reads as depth between layers rather than a spinning card. Drop ICON_DEPTH to match LABEL_DEPTH and the two layers weld back into one flat shape.

Button a Depth Value Pushes Only the Icon Apart
Open in a new tab

04 · Button a Depth Value Pushes Only the Icon Apart — Measured area 2.401% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

ICON_DEPTHLABEL_DEPTHtranslate3d
  var LERP = 0.17;
  var ICON_DEPTH = 22;   // icon-layer multiplier — floats in front, so it moves further
  var LABEL_DEPTH = 8;   // label-layer multiplier — sits behind, so it moves less
  var targetNX = 0, targetNY = 0;
  var curNX = 0, curNY = 0;
  var hasPointer = false;

  function clamp(v, lo, hi) { return Math.max(lo, Math.min(hi, v)); }
  function syntheticTarget(t) { return [Math.sin(t * 1.05), Math.sin(t * 0.7 + 2.1)]; }

  function render(nx, ny) {
    btn.style.transform = 'rotateX(' + (-ny * 8).toFixed(2) + 'deg) rotateY(' + (nx * 8).toFixed(2) + 'deg)';
    icon.style.transform = 'translate3d(' + (nx * ICON_DEPTH).toFixed(1) + 'px, ' + (ny * ICON_DEPTH).toFixed(1) + 'px, 0)';
    label.style.transform = 'translate3d(' + (nx * LABEL_DEPTH).toFixed(1) + 'px, ' + (ny * LABEL_DEPTH).toFixed(1) + 'px, 0)';
  }

05Button Where a Tilt Angle Lights Up One Edge

A tilt vector's angle, not its magnitude, aims a conic-gradient bevel around the button's edge, so the bright band always sits on the side the button leans toward. A separate side element scales along its height in step with the tilt's magnitude, standing in for the button's newly-visible edge thickness without adding a second real 3D face. The floor shadow reads only the coordinate's x component, so it slides sideways instead of spreading outward in every direction.

Button Where an Angle Value Lights Up the Edge
Open in a new tab

05 · Button Where an Angle Value Lights Up the Edge — Measured area 13.927% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

MAX_DEGconic-gradientmask-composite
  // tilt vector's angle and magnitude drive the conic-gradient rotation and glow width. The edge light sits on the lean side
  // widened width/contrast so the edge band crosses the whole side — the MAX_DEG tilt-angle value itself stays fixed
  function render(nx, ny) {
    var rotY = nx * MAX_DEG;
    var rotX = -ny * MAX_DEG;
    btn.style.transform = 'rotateX(' + rotX.toFixed(2) + 'deg) rotateY(' + rotY.toFixed(2) + 'deg)';
    var mag = clamp(Math.sqrt(nx * nx + ny * ny), 0, 1);
    var ang = Math.atan2(ny, nx) * 180 / Math.PI + 90;
    var width = 70 + mag * 110;
    var alpha = (0.38 + mag * 0.6).toFixed(2);
    bevel.style.background = 'conic-gradient(from ' + ang.toFixed(1) + 'deg, rgba(91,140,248,0), rgba(91,140,248,' + alpha + ') ' + (width / 2).toFixed(1) + 'deg, rgba(91,140,248,0) ' + width.toFixed(1) + 'deg)';
    // floor shadow — shifts toward the lean direction
    var floorShift = nx * 46;
    floor.style.transform = 'translateX(' + floorShift.toFixed(1) + 'px) scale(' + (1 + mag * 0.4).toFixed(2) + ')';
    floor.style.opacity = (0.14 + mag * 0.7).toFixed(2);
    // side thickness — the button's newly-visible 'side' lengthens with the tilt magnitude, reading as 3D thickness (MAX_DEG unchanged, a pure presentation layer)
    side.style.transform = 'scaleY(' + (0.4 + mag * 2.6).toFixed(2) + ')';
    side.style.opacity = (0.25 + mag * 0.7).toFixed(2);
  }

06Button Where a Press Depth Springs Back After Release

How long the pointer stays down becomes a press depth, capped once the hold passes PRESS_DEPTH_CAP = 480 milliseconds, and releasing it lets that depth spring back through a STIFFNESS/DAMP_BASE pair rather than easing back in a straight line. Damping is not fixed — it widens by DAMP_DEPTH_RANGE as the press goes deeper, so a quick tap settles fast while a long hold overshoots and wobbles before it rests. The tilt on this one stays small on purpose (MAX_DEG = 6), so the spring along z stays the part doing most of the talking.

Button Where a Press-depth Value Springs Back
Open in a new tab

06 · Button Where a Press-depth Value Springs Back — Measured area 3.7% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

PRESS_DEPTH_CAPDAMP_BASESTIFFNESS
  var PERIOD = 2.4;              // one synthetic-demo cycle length (seconds)
  var STIFFNESS = 0.28;
  var DAMP_BASE = 0.60;          // damping floor — a shallow press settles fast
  var DAMP_DEPTH_RANGE = 0.32;   // damping widens the deeper the press, so it overshoots more
  var PRESS_DEPTH_CAP = 480;     // hold this long (ms) or more and depth reaches 1
  var MAX_DEG = 6;
  var LERP = 0.16;

  var targetNX = 0, targetNY = 0, curNX = 0, curNY = 0;
  var hasPointer = false;
  var pressedReal = false;
  var wasHeld = false;
  var pressStartNow = 0;
  var damping = DAMP_BASE;
  var aimZ = 0, curZ = 0, velZ = 0;

  function clamp(v, lo, hi) { return Math.max(lo, Math.min(hi, v)); }
  function syntheticTarget(t) { return [Math.sin(t * 0.7 + 1.1), Math.sin(t * 0.5)]; }

07Button Whose Two Grid Layers Drift Apart in Parallax

The same coordinate pair is multiplied by two different depths — FAR_DEPTH = 10 and NEAR_DEPTH = 26, the near layer negated — so a background grid pattern splits into two layers that drift in opposite directions as the pointer moves. Because both backgroundPosition values come from one render() call, the near and far grids never fall out of sync with each other or with the button's own rotation. Set both depths to the same number and the parallax disappears, leaving one flat grid behind.

Button Whose Grid Pattern Shifts With Every Tilt Value
Open in a new tab

07 · Button Whose Grid Pattern Shifts With Every Tilt Value — Measured area 4.097% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

FAR_DEPTHNEAR_DEPTHbackgroundPosition
  var MAX_DEG = 9;
  var LERP = 0.16;
  var FAR_DEPTH = 10;
  var NEAR_DEPTH = 26;
  var targetNX = 0, targetNY = 0, curNX = 0, curNY = 0;
  var hasPointer = false;

  function clamp(v, lo, hi) { return Math.max(lo, Math.min(hi, v)); }
  function syntheticTarget(t) { return [Math.sin(t * 0.9), Math.sin(t * 1.4 + 1.6)]; }

  function render(nx, ny) {
    btn.style.transform = 'rotateX(' + (-ny * MAX_DEG).toFixed(2) + 'deg) rotateY(' + (nx * MAX_DEG).toFixed(2) + 'deg)';
    gridFar.style.backgroundPosition = (nx * FAR_DEPTH).toFixed(1) + 'px ' + (ny * FAR_DEPTH).toFixed(1) + 'px';
    gridNear.style.backgroundPosition = (-nx * NEAR_DEPTH).toFixed(1) + 'px ' + (-ny * NEAR_DEPTH).toFixed(1) + 'px';
  }

08Rim Glow Whose Intensity a Tilt Magnitude Sets

This one deliberately throws away direction and keeps only the tilt's magnitude, turning it into a box-shadow blur between BLUR_BASE = 6 and BLUR_BASE + BLUR_RANGE, plus a matching spread and alpha. Because direction never reaches the glow, tilting left and tilting right at the same magnitude produce an identical rim — only how far the pointer sits from center changes anything. Item 05's edge light reads direction; this one reads only how far, on purpose.

Rim Glow Whose Intensity a Tilt-magnitude Value Sets
Open in a new tab

08 · Rim Glow Whose Intensity a Tilt-magnitude Value Sets — Measured area 10.337% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

BLUR_BASEBLUR_RANGEmag
  var MAX_DEG = 10;
  var LERP = 0.16;
  var BLUR_BASE = 6;
  var BLUR_RANGE = 34;
  var targetNX = 0, targetNY = 0, curNX = 0, curNY = 0;
  var hasPointer = false;

  function clamp(v, lo, hi) { return Math.max(lo, Math.min(hi, v)); }
  function syntheticTarget(t) { return [Math.sin(t * 1.1 + 0.3), Math.sin(t * 1.6)]; }

  // direction only drives rotation; the rim glow reads magnitude alone — unlike item 05's directional light
  function render(nx, ny) {
    btn.style.transform = 'rotateX(' + (-ny * MAX_DEG).toFixed(2) + 'deg) rotateY(' + (nx * MAX_DEG).toFixed(2) + 'deg)';
    var mag = clamp(Math.sqrt(nx * nx + ny * ny), 0, 1);
    var blur = BLUR_BASE + mag * BLUR_RANGE;
    var spread = 1 + mag * 5;
    var alpha = (0.28 + mag * 0.5).toFixed(2);
    btn.style.boxShadow = '0 0 ' + blur.toFixed(1) + 'px ' + spread.toFixed(1) + 'px rgba(91,140,248,' + alpha + '), 0 12px 20px rgba(23,20,26,.28)';
  }

09Button Whose Value Drifts on Its Own When No Pointer Is Near

With no pointer present, idleDrift() sums two sine waves of different frequency and phase per axis into a fixed, seeded path — no Math.random anywhere — so the button keeps wandering slowly instead of sitting frozen between visits. The same render() call that idle drift feeds also lifts the button along translateY, widens its blur, and slides a background glow to the side opposite the lean, so idle motion and pointer-driven motion read as one continuous behavior. Move the pointer in and idleDrift() stops contributing immediately — the event's own coordinates take over the same two variables.

Button Whose Value Drifts on Its Own When No Pointer Is Near
Open in a new tab

09 · Button Whose Value Drifts on Its Own When No Pointer Is Near — Measured area 6.923% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

MAX_DEGLERPidleDrift
  function render(nx, ny) {
    var rotY = nx * MAX_DEG;
    var rotX = -ny * MAX_DEG;
    var mag = Math.min(1, Math.sqrt(nx * nx + ny * ny));
    var lift = 1 - mag * 0.4;
    btn.style.transform = 'translateY(' + ((1 - lift) * -6).toFixed(2) + 'px) rotateX(' + rotX.toFixed(2) + 'deg) rotateY(' + rotY.toFixed(2) + 'deg)';
    var blur = 16 + Math.abs(nx) * 10 + Math.abs(ny) * 10;
    btn.style.boxShadow = '0 ' + (10 * lift).toFixed(1) + 'px ' + blur.toFixed(1) + 'px rgba(8,6,12,.34)';
    // floor shadow — falls away toward the side opposite the lean, building up area
    floor.style.transform = 'translate(' + (nx * 38).toFixed(1) + 'px, ' + (ny * 16).toFixed(1) + 'px) scale(' + (1 + mag * 0.32).toFixed(2) + ')';
    floor.style.opacity = (0.16 + mag * 0.55).toFixed(2);
    // highlight — brightens on the opposite (lifted) side, moving as a pair with the shadow
    var gx = (50 - nx * 32).toFixed(0);
    var gy = (50 - ny * 32).toFixed(0);
    glow.style.background = 'radial-gradient(circle at ' + gx + '% ' + gy + '%, rgba(255,255,255,' + (0.16 + mag * 0.42).toFixed(2) + '), rgba(255,255,255,0) 62%)';
  }

Where These Nine Actually Get Used, Not Just Demoed

Checkout and upgrade buttons are where the sweeping-highlight pattern in item 02 earns its keep — a promo banner button or a premium checkout button benefits from motion that reads as worth noticing, without asking the whole page to reflow, and the pointer-driven glow costs nothing extra once the button already sits under the cursor.

Dark-mode interfaces lean on item 05 instead, because a bevel that only shows up as light along one edge reads clearly against a dark background where a soft drop shadow would simply disappear; the same pattern suits glass-panel buttons that already rely on edges rather than fills to read as raised.

Item 06's press-depth spring belongs on the one button per screen that actually commits something — a form-submit button or a confirm action — since the springy release after a long hold gives the one piece of feedback a settle animation can usefully offer: that the app noticed how long the press was, not just that a click happened.

Three Kinds of Value Are Doing the Deciding Here

Group the nine by what kind of number their render() actually reads, and the pattern behind the pattern shows up.

A Coordinate Pair Decides Direction — 01, 03, 04, 05, 07, 09

Six of the nine read nx and ny separately, so which corner lifts depends on where the pointer is, not just how far.

A Single Magnitude Decides Intensity — 02, 08

Two of the nine collapse the pair into one number before it reaches the visual effect, so direction stops mattering past that point.

A Held-time Value Decides How Far It Springs — 06

One of the nine never reads a coordinate for its signature effect at all — it reads how long the pointer stayed down.

Where Can You Find a css 3d button generator Instead of Building One?

Short answer: this post doubles as one. All nine patterns above are copy-paste ready, and the zip below adds the three tuned variants on top, so there's no separate tool to install or account to create before the first button rotates.

If what's actually wanted is a 3d button css codepen to fork line by line, items 01 and 06 are the two worth forking first — one shows the coordinate-to-rotation math, the other shows the spring that undoes it on release.

Nudge Three Numbers and Feel Each Button Change Weight

Item Value What moving it does
01 cursor rotate MAX_DEG 14 → 20 The tilt swings further before it caps, so lifted corners read sharper
06 press-release spring DAMP_BASE 0.60 → 0.40 Damping loosens, so the spring overshoots more and takes longer to settle
08 rim glow BLUR_RANGE 34 → 50 The glow spreads wider and softer at full tilt instead of staying tight

What the Measurements Say Across All Nine

Rolled up across all nine, cumulative area lands between 2% and 14% — normal for a button component, since only the button itself and its shadow or highlight ever move, unlike a full-screen scene demo where the whole frame shifts. What a component item is judged on isn't area, it's how much work one pointer value is made to do.

Item Cumulative area Avg. intensity Moved frames
01 cursor rotate 3.1% 34.0 23/23
02 highlight sweep 12.4% 22.3 23/23
03 shadow stack 6.1% 30.2 22/23
04 icon parallax 2.4% 63.2 23/23
05 edge bevel 13.9% 20.7 23/23
06 press-release spring 3.7% 39.1 23/23
07 grid parallax 4.1% 22.4 23/23
08 rim glow 10.3% 25.8 23/23
09 idle drift 6.9% 21.7 23/23

Where Every One of These Nine Breaks

Stack two of these patterns on the same button and they fight over the same transform property, since each render() overwrites the whole btn.style.transform string rather than merging with whatever the other pattern last wrote. Touch devices without hover never fire pointermove before a touch lands, so on those, tilt only ever updates through the click and keydown branches — the continuous tracking these demos are built around simply doesn't happen. A pointer that re-enters right after leaving can also be caught mid-ease on a very slow frame, producing one visible snap instead of the usual smooth trail.

Everything above — nine index.html files and the three variant values from the table — sits in one zip file below, locked behind qvyanve8 so opening it stays a deliberate step rather than an accidental download.

What prefers-reduced-motion Actually Turns Off Here

Every one of these nine checks prefers-reduced-motion once, before the loop ever starts. When it's set, the button renders a single fixed tilt — never zero, since a perfectly flat button would look like a bug rather than a preference — and the requestAnimationFrame loop that drives both the synthetic idle path and live pointer tracking never starts at all. Clicking and using the arrow keys still moves the button in every pattern — in one immediate step, without the interpolation, since each handler calls render() once right after it updates the target value; reduced motion turns off the continuous animation loop, not the button's ability to respond.

Questions Before You Unzip These Nine Buttons

Is this really the same as a css 3d button generator, or just nine hand-written demos?

Nine hand-written demos, not a generator with knobs — but each one already exposes the two or three constants (MAX_DEG, LERP, and one item-specific value) that a generator would expose anyway, right at the top of its script, above render().

Do any of these need a mouse to animate?

No — every pattern falls back to a seeded synthetic pointer path once hasPointer is false, so the tilt keeps moving in a fixed, repeatable pattern with nobody touching the screen. That's also what the demo grid and the headless measurement both watch during screenshotting.

Why does one of these move on 22 measured frames instead of 23?

The measurement counts frames where the visible pixels actually changed enough to register, out of 23 possible; items whose easing already settles close to its target by the last frame or two can register one fewer moved frame without anything being wrong. One of these nine — 03, where the shadow stack's three layers all ease toward the same target — settles a touch earlier than the rest for exactly that reason.

Related reading: if a tilt effect isn't quite the shape needed, 9 CSS Card Hover Effects — One Line, Copy-Paste covers flat hover states instead of pointer tracking, 9 CSS 3D Cube Effects — One Line, Copy-Paste carries the same perspective math over to a rotating cube instead of a button, and 9 Mouse Effects CSS Tricks You Can Copy-Paste moves the pointer tracking off the button entirely and onto the cursor itself.

Enter the archive password

The password is inside this article. You will find it as you read.