Mesh Pastell

Mesh Pastell: CSS-Button. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.

gradientmulti-layerpastelsoft

CSS

.btn-030 {
  font: 600 14px/1 system-ui,sans-serif;
  color: #3b0764;
  background: radial-gradient(at 20% 20%,#fbcfe8 0,transparent 50%),radial-gradient(at 80% 30%,#c7d2fe 0,transparent 50%),radial-gradient(at 50% 90%,#bbf7d0 0,transparent 55%),#f5f3ff;
  border: 1px solid rgba(59,7,100,.15);
  border-radius: 10px;
  padding: 12px 24px;
  cursor: pointer;
  transition: filter .2s,border-color .2s
}
.btn-030:hover {
  filter: saturate(1.4);
  border-color: rgba(59,7,100,.4)
}
.btn-030:focus-visible {
  outline: 2px solid #7c3aed;
  outline-offset: 2px
}
.btn-030:active {
  filter: saturate(1.4) brightness(.95)
}

HTML

<button class="btn-030">Try the beta</button>

Prompt

Ein Pastell-Mesh-Verlaufs-Button: drei weiche radiale Blobs (Pink #fbcfe8 oben links, Perlblau #c7d2fe oben rechts, Mint #bbf7d0 unten) über einer #f5f3ff Basis, tief violetter Text #3b0764 in 14px semibold, 1px Rahmen in 15% Lila, 10px Radius, 12px mal 24px Padding. Hover sättigt auf 140% und dunkelt den Rahmen; active dimmt zusätzlich 5%. Fokus-Outline 2px Violett.

Mesh Pastell

Gleiches Regal