Malla amanecer

Malla amanecer: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.

aurora meshroundedwarmstatic-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

Un botón con degradado de malla cálido: manchas radiales amarilla #fde68a arriba a la izquierda, salmón #fca5a5 arriba a la derecha y naranja #fdba74 abajo en el centro sobre una base crema #fff7ed, borde de 1px #fed7aa, radio de 14px, texto marrón oscuro #431407 de 15px semibold, padding de 14px por 28px. El fondo tiene un tamaño del 150% y se desliza a la esquina opuesta al pasar el cursor en 600ms mientras aparece una sombra naranja suave. En active añade una sombra inset naranja. Foco con outline #ea580c de 2px.

Malla amanecer

Misma estantería