Coyote Labby Coyote Concept

NewCSS only · box-shadow · transform

Stack Pop

A chunky stacked look with two hard shadows. Lifts towards you on hover and presses flat when clicked.

A free neubrutalism button in HTML and CSS. Also known as hard shadow button, brutalist button, stacked shadow hover or retro 3D button.

Class
.CCStack
Weight
0.7 KB
Needs
CSS only
Best for
Bold brands, games, zines, kids' sites

Tune it

Every snippet on this page follows these settings.

How the Stack Pop hover effect works

  1. Two hard box-shadows, one in the ink colour and one in a darker accent, stack the element like layered card.
  2. On hover it moves up and left while the shadows grow, so it seems to lift.
  3. On press it moves into its shadows' place and they shrink to nothing: pressed flat.

Add it to your site

  1. Add the styles. Link https://coyoteconcept.com/lab/cc-lab.css once, or paste the CSS from any snippet below.
  2. Set a colourway. Wrap your content in class="CCTheme CCEmber", or any other colourway.
  3. Add the classes. For example <button class="CCButton CCStack">.
  4. That’s it. Stack Pop is CSS only.

Core components

Stack Pop on button, card, dropdown, input.

More ways to use it

The same class on badge, modal, image card.

The Stack Pop code

The plain CSS behind the effect. Colours, speed and strength come from the --cc- custom properties; the snippets above bundle it with the component styles and your settings.

Show the CSS
.CCStack {
  border: 2px solid var(--cc-ink);
  box-shadow: 4px 4px 0 var(--cc-ink), 8px 8px 0 color-mix(in srgb, var(--cc-accent) 55%, var(--cc-bg));
  transition: transform calc(.18s / var(--cc-speed)), box-shadow calc(.18s / var(--cc-speed));
}
.CCStack:is(.CCButton, .CCBadge) { background: var(--cc-accent); color: var(--cc-on-accent); }
.CCButton.CCStack { border-radius: 14px; }
.CCStack:hover,
.CCStack:focus-visible {
  transform: translate(-3px, -3px);
  box-shadow: 7px 7px 0 var(--cc-ink), 13px 13px 0 color-mix(in srgb, var(--cc-accent) 55%, var(--cc-bg));
}
.CCStack:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--cc-ink), 0 0 0 transparent; }
@media (prefers-reduced-motion: reduce) { .CCStack { transition: none; } }

Pairs well with

Avoid on the same element Magnetic (transform), Ember Glow (box-shadow), 3D Tilt (transform), Liquid Fill (fill), Ink Pour (fill), Jelly (transform), Neon (box-shadow), Northern Lights (box-shadow, fill), Metal (box-shadow, fill), Arrow Slide (fill), Soft Press (box-shadow, transform), Grain (fill), Pixel (fill), Goo (fill).

Browser support

Chrome & Edge111+
Safari16.2+
Firefox113+

Older browsers show the element without the effect: nothing breaks.

Accessibility

  • The thick ink border keeps the shape clear in any colourway.
  • Lifts on keyboard focus too.
  • No transitions under reduced motion.

Performance

  • 0.7 KB of code, no libraries.
  • Animates transforms, opacity and gradients, which browsers handle cheaply.
  • This page pauses every animation that’s scrolled out of view. Worth copying if you use lots of them.

Questions about Stack Pop

What is a neubrutalism button?

A chunky stacked look with two hard shadows. Lifts towards you on hover and presses flat when clicked. Stack Pop is a free neubrutalism button, also known as hard shadow button or brutalist button, that works on buttons, cards, dropdowns, text inputs and more.

How do you make a neubrutalism button in CSS?

Two hard box-shadows, one in the ink colour and one in a darker accent, stack the element like layered card. On hover it moves up and left while the shadows grow, so it seems to lift. On press it moves into its shadows' place and they shrink to nothing: pressed flat.

How do I add Stack Pop to a button?

Add the class CCStack next to CCButton, inside an element with the CCTheme class, then include the Stack Pop CSS. The Copy button on this page gives you all of it in one snippet.

Does Stack Pop need JavaScript?

No, it's CSS only.

Which browsers support Stack Pop?

Chrome and Edge 111+, Safari 16.2+ and Firefox 113+. Older browsers show the element without the effect, so nothing breaks.

Is Stack Pop accessible?

The thick ink border keeps the shape clear in any colourway. Lifts on keyboard focus too. No transitions under reduced motion.

Can I use Stack Pop in React, Tailwind, WordPress, Shopify, Webflow or Squarespace?

Yes. There's a ready-made React component and a Tailwind version on this page. On WordPress, Shopify, Webflow, Wix or Squarespace, paste the CSS into the site's custom code or custom CSS area, then add the class CCStack to a button or block.

Is Stack Pop free for commercial use?

Yes. It's free for personal and client projects, with no sign-up. Credit and a link back are appreciated but never required.