Neumorphism and claymorphism CSS buttons
Neumorphism, or soft UI, makes a button look extruded from the page using two shadows: a light one up and to the left, a dark one down and to the right. Claymorphism adds colour and inner shadows for a puffy, 3D-clay look.
Tips for neumorphism & clay CSS buttons
Neumorphic buttons must match the page background exactly. The classic is #e0e5ec. Contrast is naturally low, so give the label a strong colour and use a clear pressed state (inset shadows) so people can tell what is clickable.
Click any button above to get its CSS and HTML, or open the editor to tune the colours, font, shadows and hover animation and copy your own version.