ISby Informeek Studio·Made with Claude·11 November 2026
LiveMove your cursor near each button and let go
The prompt
Claude · Claude Opus 5.5
Create three buttons with a magnetic hover effect on a pale lavender background (#eef0ff). Heading "Buttons that lean in" and a short hint line. Buttons: a pill "Start free trial" with a violet to magenta gradient (#6d5dfc to #b44cf0) and a soft coloured shadow; a 112px round dark navy (#14123a) play button with a white triangle; and an outlined "Book a call" button with a 2px navy border and a hard 6px offset shadow. When the pointer comes within 80px of a button edge, the button moves toward it by 30% of the distance and its label moves a further 35% of that, so the text floats inside the button. When the pointer leaves, the button springs back with an overshooting cubic-bezier(.25,1.6,.4,1) over 0.5s. Use CSS variables for the offset and one pointermove listener on the window, so it works for touch drags too. Shrink slightly on press, keep visible focus rings, and turn the effect off for reduced motion.
Written by Informeek Studio to recreate this design. Prompts are not deterministic: running it again gives a similar result, not an identical one.
Use it in three steps
Copy the prompt with the button above.
Paste it into your tool, such as v0, Lovable, Bolt or Claude.
Make it yours by swapping the labels and the gradient for your brand colours.
About this button hover effect
A magnetic button hover effect makes a call to action feel like it wants to be clicked. As the pointer approaches, the button drifts toward it, and the label inside moves a little further still, so the text seems to float. When the pointer leaves, the button springs back past its resting place and settles.
Three styles show that the effect works on any button shape: a gradient pill, a round play button and an outlined button with a hard offset shadow. The pull is deliberately gentle, 30 percent of the distance, so the buttons never collide or chase the cursor across the screen.
Why the prompt works
It gives the range and strength, 80 pixels and 30 percent, the two numbers that decide whether it feels playful or broken.
It names the spring curve for the return, which is where the character comes from.
It uses one window listener, so touch drags work as well as mouse movement.
It keeps focus rings and a reduced motion switch.
Where to use it
Primary buttons on landing pages, portfolio contact links and play buttons on video heroes. One or two per page is the right dose.
The prompt is shared under CC BY 4.0. Reuse it freely, including commercially, with a credit linking back to this page.
We use cookies to measure how the site is used and, if you allow it, to show advertising. Prompts you copy and previews you try are never collected. See our privacy policy.