# Cúpula de cristal (B 129)

Categoría: Botones  
Etiquetas: skeuomorphic, embossed, pill, glossy, jelly  
Página: https://designforai.dev/es/snippet/btn-129

## Prompt

Una píldora azul glossy estilo gelatina: degradado de #3b82f6 a #1d4ed8, borde de 1px #1e40af, texto blanco de 15px en negrita con una sombra oscura por debajo, padding de 14px por 32px, un brillo inset superior de 1px azul claro, una sombra inset inferior de 3px más oscura, una sombra azul de 4px, y un reflejo glossy de blanco a transparente que cubre el 45% superior (pseudoelemento, insets laterales del 8%). Al pasar el cursor se aclara un 8%; en active baja 2px y aplana las sombras. Foco con outline azul de 2px y 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)
}
```