# Balanceo de péndulo (B 124)

Categoría: Botones  
Etiquetas: tilt, rotate, rounded, hinge, animated  
Página: https://designforai.dev/es/snippet/btn-124

## 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.

## HTML

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

## CSS

```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; }
}
```