Design for AIClay bubble
Clay bubble: a CSS button. Copy the rules, or the prompt that rebuilds it.
CSS
.btn-131 {
font: 700 15px/1 system-ui,sans-serif;
color: #fff;
background: #7c9cff;
border: 0;
border-radius: 26px;
padding: 16px 32px;
cursor: pointer;
box-shadow: inset -6px -6px 12px #5d7de6,inset 6px 6px 12px #a3baff,8px 8px 20px #7c9cff55;
transition: transform .2s,box-shadow .2s
}
.btn-131:hover {
transform: translateY(-2px);
box-shadow: inset -6px -6px 12px #5d7de6,inset 6px 6px 12px #a3baff,10px 12px 26px #7c9cff66
}
.btn-131:focus-visible {
outline: 3px solid #5d7de6;
outline-offset: 3px
}
.btn-131:active {
transform: translateY(1px) scale(.98);
box-shadow: inset -3px -3px 6px #5d7de6,inset 3px 3px 6px #a3baff,4px 4px 10px #7c9cff55
}
HTML
<button class="btn-131">Bounce</button>Prompt
A claymorphism button: periwinkle #7c9cff with a puffy look from two inset shadows (dark #5d7de6 bottom-right, light #a3baff top-left, 12px blur, 6px offset) and a soft coloured drop shadow (8px 8px 20px), 26px radius, white 15px bold text, 16px by 32px padding. Hover lifts 2px with a larger shadow; active squishes to 0.98 with shallower insets. Focus 3px darker-blue outline.