Design for AI

Glossy top-light

Glossy top-light: a CSS button. Copy the rules, or the prompt that rebuilds it.

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

A glossy sky-blue button #0284c7 with white 15px bold text, 12px radius, 14px by 28px padding and a blue shadow. The top half carries a static white gloss (40% fading to 5%) with a curved lower edge, giving an aqua-style look. Hover #0369a1, active #075985 with no shadow. Focus ring translucent blue.

Same shelf