Design for AIMesh Sonnenaufgang
Mesh Sonnenaufgang: CSS-Button. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.
CSS
.btn-137 {
font: 600 15px/1 system-ui,sans-serif;
color: #431407;
background: radial-gradient(at 0 0,#fde68a,transparent 60%),radial-gradient(at 100% 0,#fca5a5,transparent 60%),radial-gradient(at 50% 100%,#fdba74,transparent 60%),#fff7ed;
border: 1px solid #fed7aa;
border-radius: 14px;
padding: 14px 28px;
cursor: pointer;
background-size: 150% 150%;
background-position: 0 0;
transition: background-position .6s,box-shadow .3s
}
.btn-137:hover {
background-position: 100% 100%;
box-shadow: 0 6px 18px -6px #fb923c88
}
.btn-137:focus-visible {
outline: 2px solid #ea580c;
outline-offset: 3px
}
.btn-137:active {
box-shadow: inset 0 2px 6px #fb923c55
}
HTML
<button class="btn-137">Good morning</button>Prompt
Ein warmer Mesh-Verlaufs-Button: radiale Blobs in Gelb #fde68a oben links, Lachs #fca5a5 oben rechts und Orange #fdba74 unten mittig über einer cremefarbenen #fff7ed Basis, 1px Rahmen #fed7aa, 14px Radius, dunkelbrauner #431407 Text 15px semibold, 14px mal 28px Padding. Der Hintergrund ist auf 150% skaliert und gleitet beim Hover in 600ms in die gegenüberliegende Ecke, während ein weicher oranger Schatten erscheint. Active fügt einen orangen Inset-Schatten hinzu. Fokus 2px #ea580c Outline.