Design for AIClay-Blase
Clay-Blase: CSS-Button. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.
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
Ein Claymorphism-Button: Perlblau #7c9cff mit aufgeplustertem Look aus zwei Inset-Schatten (dunkel #5d7de6 unten rechts, hell #a3baff oben links, 12px Blur, 6px Versatz) und einem weichen farbigen Drop-Shadow (8px 8px 20px), 26px Radius, weißer Text 15px bold, 16px mal 32px Padding. Hover hebt 2px mit größerem Schatten; active quetscht auf 0.98 mit flacheren Insets. Fokus 3px dunkelblauere Outline.