Magnetischer Zug

Magnetischer Zug: CSS-Button. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.

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

Eine warmgelbe #fde68a Pille mit #0f172a 14px semibold Text und 13px mal 26px Padding. Ein unsichtbarer 14px Halo drumherum (ein Pseudo-Element) vergrößert die Hover-Fläche, sodass sich der Button schon bewegt, bevor der Cursor ihn berührt: beim Hover springt er 3px nach rechts und 4px nach oben mit federndem Überschwingen (cubic-bezier .2,1.8,.4,1) und skaliert 1.04, Hintergrund #fcd34d. Active schnappt zurück und skaliert 0.98 auf #fbbf24. Fokus 2px dunkle Outline.

Magnetischer Zug

Gleiches Regal