Brillo superior glossy

Brillo superior glossy: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.

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

Un botón glossy azul cielo #0284c7 con texto blanco de 15px en negrita, radio de 12px, padding de 14px por 28px y una sombra azul. La mitad superior lleva un reflejo blanco estático (del 40% al 5%) con el borde inferior curvado, dando un aspecto estilo aqua. Hover #0369a1, active #075985 sin sombra. Anillo de foco azul translúcido.

Brillo superior glossy

Misma estantería