Esquina de gota

Esquina de gota: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.

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

Un botón violeta #6d28d9 con forma de gota: radio de 24px en tres esquinas y 4px en la inferior izquierda, texto blanco de 14px semibold, padding de 13px por 24px. Al pasar el cursor la esquina afilada salta a la superior izquierda con un easing de muelle con rebote (cubic-bezier .34,1.56,.64,1) en 350ms y el color se oscurece a #5b21b6; en active la mueve a la superior derecha y usa #4c1d95. Foco con outline violeta de 2px.

Esquina de gota

Misma estantería