HTML + CSSButtons
Clay button
A puffy, soft-looking button that squashes when pressed and wobbles back into shape like modelling clay.
Settings
16px
1x
28px
Code
<button class="uv-cly">Add to cart</button>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Buttons
See all ButtonsWhere to use it
Claymorphism gives flat interfaces a toy-like, tactile feel, and this button leans into it with inner light and shadow that make the pill look inflated. On click it squashes and rebounds with a spring, so the press feels physical. It fits kids' apps, playful shops, games and friendly onboarding screens.
The corner radius is adjustable, from soft square to full pill. Use a light main color so the inner shading reads well, and keep it to one per screen: two inflated buttons side by side start to compete.