Skeuomorphic CSS Button

Summary

A CSS experiment exploring skeuomorphic push buttons that use box-shadow to simulate physical depth and realistic press states without any images.

Visual description

A light gray background hosts a single large rounded rectangular button labeled Push in centered dark sans-serif type. The button uses layered box-shadows and subtle highlights to create convincing physical depth, with darker shading at the lower edge suggesting a beveled, pressable form. The complete CSS rendering produces tactile three-dimensionality without any image assets.

Key takeaway

Build depth and press-state feedback using CSS shadows and gradients alone, avoiding images while achieving convincing skeuomorphic material illusions.

Reuse notes

Reach for this as a motion still reference. Pairs with minimal, soft ui directions. Original by Petr Knoll.