Design for AI

Droplet corner

Droplet corner: a CSS button. Copy the rules, or the prompt that rebuilds it.

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

A violet #6d28d9 button shaped like a droplet: 24px radius on three corners and 4px on the bottom-left, white 14px semibold text, 13px by 24px padding. On hover the sharp corner jumps to the top-left with an overshooting spring easing (cubic-bezier .34,1.56,.64,1) over 350ms and the colour darkens to #5b21b6; active moves it to the top-right and uses #4c1d95. Focus 2px violet outline.

Same shelf