Brilho no topo

Brilho no topo: um botão em CSS. Copie as regras, ou o prompt que o reconstrói.

shineglossstatic-highlightrounded

CSS

.btn-073 {
  position: relative;
  overflow: hidden;
  font: 700 15px/1 system-ui,sans-serif;
  color: #fff;
  background: #0284c7;
  border: 0;
  border-radius: 12px;
  padding: 14px 28px;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(2,132,199,.4);
  transition: background .15s
}
.btn-073::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,.05));
  border-radius: 12px 12px 40% 40%
}
.btn-073:hover {
  background: #0369a1
}
.btn-073:focus-visible {
  outline: 3px solid rgba(2,132,199,.5);
  outline-offset: 2px
}
.btn-073:active {
  background: #075985;
  box-shadow: none
}

HTML

<button class="btn-073">Glossy</button>

Prompt

Um botão azul céu brilhante #0284c7 com texto branco de 15px bold, raio de 12px, padding de 14px por 28px e uma sombra azul. A metade superior carrega um brilho branco estático (40% se dissolvendo em 5%) com a aresta inferior curva, dando um visual estilo aqua. Hover #0369a1, active #075985 sem sombra. Anel de foco azul translúcido.

Brilho no topo

Mesma prateleira