The candy button: a glossy 3D CTA from four shadows

Some buttons beg to be clicked. They look like a glossy candy or a physical key — puffed up, catching light, casting a soft shadow. The surprise is there's no 3D and no images involved: it's four box-shadows stacked on a blue rectangle.

Hover to float it, press to push it in. Here's every layer.

Four shadows, one rectangle

Read these top-to-bottom — outermost effect first, then inward:

box-shadow:
  0 3px 6px rgba(0, 0, 0, 0.2),             /* 1. drop  — elevation off the page */
  0 0 0 1px #296ff0,                         /* 3. ring  — seats the blue edge    */
  inset 0 0 0 1px rgba(255, 255, 255, 0.4),  /* stroke   — bright 1px rim          */
  inset 0 1px 6px 2px rgba(255, 255, 255, 0.24); /* 2. sheen — inner top gloss   */

• Drop shadow (0 3px 6px, black 20%) lifts it off the surface so it floats.
• Blue ring (0 0 0 1px, the fill blue) wraps the edge so the button reads as a solid object rather than a flat fill that was pasted on.
• Inset white stroke (inset 0 0 0 1px, white 40%) is the bright rim that edges the top and sides — the highlight where the "plastic" curves over.
• Inset sheen (inset 0 1px 6px 2px, white 24%) is the soft glow under the top edge. This is the single layer that turns "blue box" into "glossy candy."

That maps one-to-one to the Fill / Stroke / Drop / Inner / Drop layers you'd set in a design tool — the browser does all of it in one property.

States that feel physical

A 3D look has to react to touch or the illusion breaks.

.btn-candy {
  --lift: 0px;
  transform: translateY(var(--lift));
  transition: transform .16s cubic-bezier(.2,.7,.2,1),
              box-shadow .16s ease, filter .16s ease;
}
/* rise + the drop shadow grows and tints blue → it floats */
.btn-candy:hover {
  --lift: -2px;
  filter: brightness(1.05);
  box-shadow: 0 8px 18px rgba(41,111,240,.35), 0 0 0 1px #296ff0,
              inset 0 0 0 1px rgba(255,255,255,.45),
              inset 0 1px 6px 2px rgba(255,255,255,.3);
}
/* sink + swap to an inset dark shadow → it presses in */
.btn-candy:active {
  transform: translateY(1px) scale(.99);
  filter: brightness(.97);
  box-shadow: 0 1px 3px rgba(0,0,0,.25), 0 0 0 1px #2563d8,
              inset 0 2px 6px rgba(0,0,0,.2);
}

Hover raises the button and grows a blue-tinted shadow, so it lifts toward you. Active flips the logic: the elevation shadow collapses, an inset dark shadow appears, and the whole thing scales down a hair — light now falls into it, the universal signal for "pressed." A snappy cubic-bezier(.2,.7,.2,1) keeps the motion crisp, and it all sits behind prefers-reduced-motion.

Tailwind, if you prefer

Everything maps to utilities — the gradient and the long shadow lists go in arbitrary values:

<button
  className="inline-flex items-center gap-2 rounded-[18px] px-8 py-4 text-lg
    font-semibold text-white bg-[linear-gradient(180deg,#3F7DF4,#296FF0)]
    shadow-[0_3px_6px_rgba(0,0,0,0.2),0_0_0_1px_#296FF0,inset_0_0_0_1px_rgba(255,255,255,0.4),inset_0_1px_6px_2px_rgba(255,255,255,0.24)]
    transition-[transform,box-shadow,filter] duration-150 ease-out
    hover:-translate-y-0.5 hover:brightness-105
    active:translate-y-px active:scale-[0.99]"
>
  <Plus className="size-5" /> Add team member
</button>

Takeaways

• A "3D" button is just layered shadows: drop for lift, ring for edge, inset stroke for the rim, inset blur for the sheen.
• The inset white sheen is the highest-leverage layer — it's what makes it look glossy.
• Invert the shadow on :active (outer → inset, light → dark) and the press feels real.

Grab the prop-driven component on the Candy Button page.