Tropfen-Ecke

Tropfen-Ecke: CSS-Button. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.

liquidmorphroundedasymmetricspring

CSS

.btn-114 {
  font: 600 14px/1 system-ui,sans-serif;
  color: #fff;
  background: #6d28d9;
  border: 0;
  border-radius: 24px 24px 24px 4px;
  padding: 13px 24px;
  cursor: pointer;
  transition: border-radius .35s cubic-bezier(.34,1.56,.64,1),background .2s
}
.btn-114:hover {
  border-radius: 4px 24px 24px 24px;
  background: #5b21b6
}
.btn-114:focus-visible {
  outline: 2px solid #6d28d9;
  outline-offset: 3px
}
.btn-114:active {
  border-radius: 24px 4px 24px 24px;
  background: #4c1d95
}

HTML

<button class="btn-114">Save draft</button>

Prompt

Ein violetter #6d28d9 Button in Tropfenform: 24px Radius an drei Ecken und 4px unten links, weißer Text 14px semibold, 13px mal 24px Padding. Beim Hover springt die spitze Ecke mit überschwingendem Spring-Easing (cubic-bezier .34,1.56,.64,1) in 350ms nach oben links und die Farbe dunkelt auf #5b21b6; active verschiebt sie nach oben rechts und nutzt #4c1d95. Fokus 2px violette Outline.

Tropfen-Ecke

Gleiches Regal