Radio asimétrico

Radio asimétrico: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.

roundedsolidasymmetricplayful

CSS

.btn-023 {
  font: 700 15px/1 system-ui,sans-serif;
  color: #fff;
  background: #ea580c;
  border: 0;
  border-radius: 20px 6px 20px 6px;
  padding: 13px 26px;
  cursor: pointer;
  transition: border-radius .25s,background .2s
}
.btn-023:hover {
  border-radius: 6px 20px 6px 20px;
  background: #c2410c
}
.btn-023:focus-visible {
  outline: 3px solid rgba(234,88,12,.45);
  outline-offset: 2px
}
.btn-023:active {
  border-radius: 12px;
  background: #9a3412
}

HTML

<button class="btn-023">Let's go</button>

Prompt

Un botón naranja juguetón #ea580c con texto blanco de 15px en negrita, padding de 13px por 26px y esquinas asimétricas: 20px arriba a la izquierda y abajo a la derecha, 6px arriba a la derecha y abajo a la izquierda. Al pasar el cursor el patrón de esquinas se invierte (6/20/6/20) y el color pasa a #c2410c; en active se vuelve uniforme de 12px con #9a3412. Anillo de foco naranja translúcido.

Radio asimétrico

Misma estantería