Design for AIMagnetic pull
Magnetic pull: a CSS button. Copy the rules, or the prompt that rebuilds it.
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
A warm yellow #fde68a pill with #0f172a 14px semibold text and 13px by 26px padding. An invisible 14px halo around it (a pseudo-element) enlarges the hover area, so the button starts moving before the cursor touches it: on hover it jumps 3px right and 4px up with a springy overshoot easing (cubic-bezier .2,1.8,.4,1) and scales 1.04, background #fcd34d. Active snaps back and scales 0.98 on #fbbf24. Focus 2px dark outline.