Ponto de luz radial

Ponto de luz radial: um botão em CSS. Copie as regras, ou o prompt que o reconstrói.

gradientradialhover-moverounded

CSS

.btn-029 {
  font: 600 15px/1 system-ui,sans-serif;
  color: #fff;
  background: radial-gradient(circle at 30% 30%,#fb7185,#be123c 70%);
  border: 0;
  border-radius: 12px;
  padding: 13px 26px;
  cursor: pointer;
  transition: background .3s
}
.btn-029:hover {
  background: radial-gradient(circle at 70% 70%,#fb7185,#be123c 70%)
}
.btn-029:focus-visible {
  outline: 3px solid rgba(190,18,60,.5);
  outline-offset: 2px
}
.btn-029:active {
  background: #9f1239
}

HTML

<button class="btn-029">Discover</button>

Prompt

Um botão rosé com gradiente radial: um ponto de luz mais claro #fb7185 em 30% 30% que se dissolve em #be123c até 70%. Texto branco de 15px semibold, raio de 12px, padding de 13px por 26px. No hover o ponto de luz se move para 70% 70%; o active é chapado em #9f1239. Anel de foco rosé translúcido.

Ponto de luz radial

Mesma prateleira