Design for AI

Mesh sunrise

Mesh sunrise: a CSS button. Copy the rules, or the prompt that rebuilds it.

aurorameshroundedwarmstatic-with-hover

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

A warm mesh-gradient button: yellow #fde68a top-left, salmon #fca5a5 top-right and orange #fdba74 bottom-centre radial blobs over a cream #fff7ed base, 1px #fed7aa border, 14px radius, dark brown #431407 15px semibold text, 14px by 28px padding. Background is sized 150% and slides to the opposite corner on hover over 600ms with a soft orange shadow appearing. Active adds an inset orange shadow. Focus 2px #ea580c outline.

Same shelf