Neumorphic Press Button

About this button

A soft raised button that sinks into the surface when pressed, built from paired light and dark box-shadows.

How it works

The button has the same colour as the page, and depth comes only from two shadows: a dark one toward the bottom right and a light one toward the top left, which looks like a raised soft surface. On :active both shadows become inset, so the button appears pressed into the page.

Ways to customise it

• Change the background and both shadow colours together.
• Edit the shadow offsets for more or less depth.
• Change the text colour on hover.

Good to know

Soft contrast is hard for some people to see, so keep a visible focus outline, as here, and consider a stronger text colour. It is a real button.

Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.