Design for AIMesh nascer do sol
Mesh nascer do sol: um botão em CSS. Copie as regras, ou o prompt que o reconstrói.
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
Um botão com gradiente mesh quente: manchas radiais amarela #fde68a no superior esquerdo, salmão #fca5a5 no superior direito e laranja #fdba74 no centro inferior sobre uma base creme #fff7ed, borda de 1px #fed7aa, raio de 14px, texto marrom escuro #431407 de 15px semibold, padding de 14px por 28px. O fundo tem 150% de tamanho e desliza para o canto oposto no hover em 600ms, com uma sombra laranja suave aparecendo. No active ganha uma sombra inset laranja. Foco com outline #ea580c de 2px.