Claymorphism Buttons
Soft, puffy 3D clay-style elements with layered inner and outer shadows — a playful trend.
<div class="clay-row"><button class="clay">Click me</button><div class="clay-card">🍭</div></div>body{background:#e0e7ff}
.clay-row{display:flex;gap:24px;align-items:center}
.clay{font:700 16px/1 system-ui,sans-serif;color:#fff;background:#7b6cff;border:0;border-radius:20px;padding:18px 32px;cursor:pointer;box-shadow:6px 6px 12px rgba(123,108,255,.4),-4px -4px 10px rgba(255,255,255,.6),inset -3px -3px 8px rgba(80,60,200,.4),inset 3px 3px 8px rgba(255,255,255,.5);transition:transform .15s}
.clay:active{transform:scale(.95)}
.clay-card{width:80px;height:80px;border-radius:26px;background:#ff8fab;display:grid;place-items:center;font-size:36px;box-shadow:8px 8px 16px rgba(255,143,171,.5),-5px -5px 12px rgba(255,255,255,.7),inset -4px -4px 10px rgba(220,100,140,.4),inset 4px 4px 10px rgba(255,255,255,.6)}Free to use.This snippet is plain HTML, CSS and JavaScript with no dependencies. Copy any file, or download the whole thing as a single ready-to-open .html page.