Squircle aplastado

Squircle aplastado: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.

liquidsquirclemorphscalesoft-body

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
}

HTML

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

Prompt

Un botón squircle teal #0f766e (radio de 18px), texto blanco de 15px semibold, padding de 14px por 28px. Al pasar el cursor se aplasta como un cuerpo blando: el radio crece a 28px mientras se estira un 6% más ancho y un 6% más bajo, color #0d9488, todo en 300ms. En active hace el apretón contrario (más estrecho y más alto, radio de 10px, #115e59). Foco con outline teal de 2px y offset de 3px.

Squircle aplastado

Misma estantería