# Tecla de vidro (B 129)

Categoria: Botões  
Tags: skeuomorphic, embossed, pill, glossy, jelly  
Página: https://designforai.dev/pt/snippet/btn-129

## 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.

## HTML

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

## CSS

```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)
}
```