# Squircle Squeeze (B 115)

Kategorie: Buttons  
Tags: liquid, squircle, morph, scale, soft-body  
Seite: https://designforai.dev/de/snippet/btn-115

## Prompt

Ein Teal #0f766e Squircle-Button (18px Radius), weißer Text 15px semibold, 14px mal 28px Padding. Beim Hover quetscht er sich wie ein weicher Körper: der Radius wächst auf 28px, während er 6% breiter und 6% kürzer wird, Farbe #0d9488, alles in 300ms. Active macht die Gegenbewegung (schmaler und höher, 10px Radius, #115e59). Fokus 2px Teal-Outline mit 3px Offset.

## HTML

```html
<button class="btn-115">Confirm</button>
```

## CSS

```css
.btn-115 {
  font: 600 15px/1 system-ui,sans-serif;
  color: #fff;
  background: #0f766e;
  border: 0;
  border-radius: 18px;
  padding: 14px 28px;
  cursor: pointer;
  transition: border-radius .3s,transform .3s,background .2s
}
.btn-115:hover {
  border-radius: 28px;
  transform: scaleX(1.06) scaleY(.94);
  background: #0d9488
}
.btn-115:focus-visible {
  outline: 2px solid #0f766e;
  outline-offset: 3px
}
.btn-115:active {
  border-radius: 10px;
  transform: scaleX(.96) scaleY(1.04);
  background: #115e59
}
```