Design for AI

Tecla de vidro

Tecla de vidro: um botão em CSS. Copie as regras, ou o prompt que o reconstrói.

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

Uma pílula azul brilhante estilo gelatina: gradiente de #3b82f6 a #1d4ed8, borda de 1px #1e40af, texto branco de 15px bold com sombra escura por baixo, padding de 14px por 32px, um realce inset azul claro de 1px no topo, uma sombra inset mais escura de 3px embaixo, uma sombra externa azul de 4px e um reflexo de branco para transparente cobrindo os 45% superiores (pseudo-elemento, insets laterais de 8%). No hover clareia 8%; no active desce 2px e achata as sombras. Foco com outline azul de 2px e offset de 4px.

Mesma prateleira