Coyote Labby Coyote Concept

NewCSS + small JS · box-shadow · neumorphism

Soft Press

Soft-UI shadows make the element sit raised on the page, and it sinks into the surface when pressed.

A free neumorphism button in HTML and CSS (with a few lines of JavaScript). Also known as soft UI button, neumorphic press, inset shadow button or embossed button.

Class
.CCSoft
Weight
1.2 KB
Needs
CSS + a few lines of JS
Best for
Dashboards, settings, calm interfaces

Tune it

Every snippet on this page follows these settings.

How the Soft Press click effect works

  1. Two box-shadows, a pale one up-left and a dark one down-right, make the element look moulded from the page.
  2. Pressing swaps them for inset shadows and shrinks it slightly, so it sinks in.
  3. A few lines of script keep the pressed look for a moment after each click, so quick taps still show.

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 CCSoft">.
  4. Add the script. Include https://coyoteconcept.com/lab/cc-lab.js, or the few lines of JavaScript in the snippet.

Core components

Soft Press on button, card, input, toggle, tabs, dropdown.

More ways to use it

The same class on modal, badge, nav bar.

The Soft Press code

The plain CSS and JavaScript 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
.CCSoft {
  border-color: transparent;
  background: color-mix(in srgb, var(--cc-bg) 92%, var(--cc-ink));
  box-shadow:
    -7px -7px 16px color-mix(in srgb, var(--cc-ink) 9%, transparent),
    8px 8px 18px rgba(0, 0, 0, .85),
    inset 1px 1px 0 color-mix(in srgb, var(--cc-ink) 10%, transparent);
  transition: box-shadow calc(.3s / var(--cc-speed)), transform calc(.3s / var(--cc-speed)), color .2s;
}
.CCSoft:is(.CCButton, .CCBadge) { color: var(--cc-accent); }
.CCSoft:hover { transform: translateY(-1px); }
.CCSoft:active,
.CCSoft.is-pressed {
  transform: scale(.97);
  transition-duration: calc(.1s / var(--cc-speed));
  box-shadow:
    inset 6px 6px 14px rgba(0, 0, 0, .85),
    inset -5px -5px 12px color-mix(in srgb, var(--cc-ink) 8%, transparent),
    0 0 0 transparent;
}
@media (prefers-reduced-motion: reduce) { .CCSoft { transition: none; } }
Show the JavaScript
document.querySelectorAll(".CCSoft").forEach(function (el) {
  if (el.dataset.ccSoft) return; el.dataset.ccSoft = 1;
  function press() { el.classList.add("is-pressed"); clearTimeout(el._ccSoft); el._ccSoft = setTimeout(function () { el.classList.remove("is-pressed"); }, 260); }
  el.addEventListener("pointerdown", press);
  el.addEventListener("keydown", function (e) { if (e.key === "Enter" || e.key === " ") press(); });
});

Pairs well with

Avoid on the same element Magnetic (transform), Ember Glow (box-shadow), Shimmer Border (background), 3D Tilt (transform), Jelly (transform), Neon (box-shadow), Northern Lights (background, box-shadow), Stack Pop (box-shadow, transform), Metal (background, box-shadow), Grain (background).

Browser support

Chrome & Edge111+
Safari16.2+
Firefox113+

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

Accessibility

  • Labels on buttons are in the accent colour for contrast.
  • Keyboard presses show it too.
  • Changes instantly under reduced motion.

Performance

  • 1.2 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 Soft Press

What is a neumorphism button?

Soft-UI shadows make the element sit raised on the page, and it sinks into the surface when pressed. Soft Press is a free neumorphism button, also known as soft UI button or neumorphic press, that works on buttons, cards, text inputs, toggles and more.

How do you make a neumorphism button in CSS?

Two box-shadows, a pale one up-left and a dark one down-right, make the element look moulded from the page. Pressing swaps them for inset shadows and shrinks it slightly, so it sinks in. A few lines of script keep the pressed look for a moment after each click, so quick taps still show.

How do I add Soft Press to a button?

Add the class CCSoft next to CCButton, inside an element with the CCTheme class, then include the Soft Press CSS and its few lines of JavaScript. The Copy button on this page gives you all of it in one snippet.

Does Soft Press need JavaScript?

Yes, a few lines. They're included in every snippet and in the hosted cc-lab.js file.

Which browsers support Soft Press?

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

Is Soft Press accessible?

Labels on buttons are in the accent colour for contrast. Keyboard presses show it too. Changes instantly under reduced motion.

Can I use Soft Press 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 CCSoft to a button or block, and paste the JavaScript into the footer code area.

Is Soft Press 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.