# Blob-Morph (B 111)

Kategorie: Buttons  
Tags: liquid, blob, morph, border-radius, organic  
Seite: https://designforai.dev/de/snippet/btn-111

## Prompt

Ein himmelblauer #0ea5e9 Button in organischer Blob-Form über einen asymmetrischen 8-Wert border-radius (60% 40% 30% 70% / 60% 30% 70% 40%), weißer Text 15px bold, 18px mal 34px Padding. Beim Hover morpht der Radius in 600ms zu einer anderen Blob-Form und die Farbe vertieft sich auf #0284c7; active springt auf eine Ellipse und #0369a1. Fokus 3px blaue Outline mit 4px Offset.

## HTML

```html
<button class="btn-111">Splash</button>
```

## CSS

```css
.btn-111 {
  font: 700 15px/1 system-ui,sans-serif;
  color: #fff;
  background: #0ea5e9;
  border: 0;
  border-radius: 60% 40% 30% 70%/60% 30% 70% 40%;
  padding: 18px 34px;
  cursor: pointer;
  transition: border-radius .6s ease-in-out,background .3s
}
.btn-111:hover {
  border-radius: 30% 60% 70% 40%/50% 60% 30% 60%;
  background: #0284c7
}
.btn-111:focus-visible {
  outline: 3px solid #0ea5e9;
  outline-offset: 4px
}
.btn-111:active {
  border-radius: 50%/50%;
  background: #0369a1
}
```