Design for AI

Atracción magnética

Atracción magnética: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.

tiltmagneticpilltranslateovershoot

CSS
.btn-122 {
  position: relative;
  font: 600 14px/1 system-ui,sans-serif;
  color: #0f172a;
  background: #fde68a;
  border: 0;
  border-radius: 999px;
  padding: 13px 26px;
  cursor: pointer;
  transition: transform .4s cubic-bezier(.2,1.8,.4,1),background .2s
}
.btn-122::before {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: inherit
}
.btn-122:hover {
  transform: translate(3px,-4px) scale(1.04);
  background: #fcd34d
}
.btn-122:focus-visible {
  outline: 2px solid #0f172a;
  outline-offset: 3px
}
.btn-122:active {
  transform: translate(0,0) scale(.98);
  background: #fbbf24
}
HTML
<button class="btn-122">Pull me</button>
Prompt

Una píldora amarillo cálido #fde68a con texto #0f172a de 14px semibold y padding de 13px por 26px. Un halo invisible de 14px a su alrededor (un pseudoelemento) amplía el área de hover, de modo que el botón empieza a moverse antes de que el cursor lo toque: al pasar el cursor salta 3px a la derecha y 4px hacia arriba con un easing de muelle con rebote (cubic-bezier .2,1.8,.4,1) y se escala 1.04, fondo #fcd34d. En active vuelve a su sitio y se escala 0.98 sobre #fbbf24. Foco con outline oscuro de 2px.

Misma estantería