Balanceo de péndulo

Balanceo de péndulo: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.

tiltrotateroundedhingeanimated

CSS

.btn-124 {
  font: 600 15px/1 system-ui,sans-serif;
  color: #fff;
  background: #b45309;
  border: 0;
  border-radius: 8px;
  padding: 14px 28px;
  cursor: pointer;
  transform-origin: top center;
  transition: background .2s
}
.btn-124:hover {
  animation: swing124 1s ease-in-out;
  background: #92400e
}
.btn-124:focus-visible {
  outline: 2px solid #b45309;
  outline-offset: 4px
}
.btn-124:active {
  transform: rotate(0) translateY(1px);
  background: #78350f
}
@keyframes swing124 {
  20% {
    transform: rotate(6deg)
  }
  40% {
    transform: rotate(-5deg)
  }
  60% {
    transform: rotate(3deg)
  }
  80% {
    transform: rotate(-2deg)
  }
  100% {
    transform: rotate(0)
  }
}
@media (prefers-reduced-motion: reduce) {
  .btn-124, .btn-124 * { animation: none; transition: none; }
}

HTML

<button class="btn-124">Swing</button>

Prompt

Un botón marrón ámbar #b45309, radio de 8px, texto blanco de 15px semibold, padding de 14px por 28px, con el origen de transformación en el centro superior para que cuelgue como un letrero. Al pasar el cursor se balancea una vez (6deg, -5deg, 3deg, -2deg, reposo) durante 1 segundo y se oscurece a #92400e. En active baja 1px sobre #78350f. Foco con outline ámbar de 2px y offset de 4px.

Balanceo de péndulo

Misma estantería