Glass dome key

Glass dome key: a CSS button. Copy the rules, or the prompt that rebuilds it.

skeuomorphicembossedpillglossyjelly

CSS

.btn-129 {
  position: relative;
  font: 700 15px/1 system-ui,sans-serif;
  color: #fff;
  text-shadow: 0 -1px 1px #0006;
  background: linear-gradient(#3b82f6,#1d4ed8);
  border: 1px solid #1e40af;
  border-radius: 999px;
  padding: 14px 32px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 #93c5fd,inset 0 -3px 6px #1e3a8a,0 4px 10px #1e40af66;
  transition: filter .15s,box-shadow .15s,transform .15s;
  overflow: hidden
}
.btn-129::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 2px;
  height: 45%;
  border-radius: 999px;
  background: linear-gradient(#fff9,#fff0);
  pointer-events: none
}
.btn-129:hover {
  filter: brightness(1.08)
}
.btn-129:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 4px
}
.btn-129:active {
  transform: translateY(2px);
  box-shadow: inset 0 1px 0 #93c5fd,inset 0 -1px 3px #1e3a8a,0 1px 3px #1e40af66;
  filter: brightness(.95)
}

HTML

<button class="btn-129">Play</button>

Prompt

A glossy jelly-style blue pill: gradient #3b82f6 to #1d4ed8, 1px #1e40af border, white 15px bold text with a dark underside shadow, 14px by 32px padding, an inset 1px light-blue top highlight, an inset 3px darker bottom shade, a 4px blue drop shadow, and a white-to-transparent gloss reflection covering the top 45% (pseudo-element, 8% side insets). Hover brightens 8%; active drops 2px and flattens the shadows. Focus 2px blue outline offset 4px.

Glass dome key

Same shelf