Neumorphic Button Template

Achieve the trendy "soft UI" look with this elegant and minimalist neumorphic button.

This design uses matching light and dark shadows to create the illusion that the button is extruded from the same material as the background, a hallmark of neumorphism.

Get Source Code Preview

About the Neumorphic Button

Neumorphism is a design style that aims to create a soft, light, and almost "unibody" look for user interfaces. Instead of floating on a different layer like in Material Design, neumorphic elements appear to be connected to the background. This template achieves the effect with a careful combination of two shadows and a background color that matches its container.

Features

• Soft UI Effect: Uses a light shadow on one corner and a dark shadow on the opposite corner to create the extruded look.
• Inset "Pressed" State: On click, the shadows reverse and move inward using the inset keyword, creating the illusion of the button being pushed into the page.
• Pure CSS and HTML: The entire neumorphic illusion is achieved without JavaScript.
• Accessible Focus: Includes a standard, high-contrast outline for the :focus-visible state, ensuring accessibility without compromising the core aesthetic.

Code Breakdown

The key to this component is the box-shadow property, which is given two comma-separated values. The first value creates a light-colored shadow offset to the top-left, and the second creates a dark-colored shadow offset to the bottom-right. The button's background color must be identical to the parent container's background for the illusion to work. In the :active state, the box-shadow values are prefixed with the inset keyword, which draws the shadows inside the button's frame, making it appear pressed.

Code

Here is the complete code for the neumorphic button.