# Glaskuppel-Taste (B 129)

Kategorie: Buttons  
Tags: skeuomorphic, embossed, pill, glossy, jelly  
Seite: https://designforai.dev/de/snippet/btn-129

## Prompt

Eine glänzende blaue Pille im Jelly-Stil: Verlauf #3b82f6 nach #1d4ed8, 1px Rahmen #1e40af, weißer Text 15px bold mit dunklem Schatten nach unten, 14px mal 32px Padding, ein 1px hellblauer Inset-Glanz oben, ein 3px dunklerer Inset-Schatten unten, ein 4px blauer Drop-Shadow und eine Glanzreflexion von Weiß nach transparent über die oberen 45% (Pseudo-Element, 8% seitlicher Einzug). Hover hellt 8% auf; active rutscht 2px ab und flacht die Schatten ab. Fokus 2px blaue Outline mit 4px Offset.

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