Move the pointer near it. Press and hold, and drag it.
Leaf Springfree
A button with mass. It leans toward the pointer, sinks when pressed, and follows a held finger against resistance.
No account, no email. The ZIP has the effect, its readme and its instructions for an AI assistant.
Or see the effects we sell →- Made with
- CSS transforms
- Size
- 2.1 KB gzipped, no dependencies
- Works in
- HTML, React, Elementor, Claude skill
- Without support
- With reduced motion it does not move at all, and your own hover state is what the visitor sees.
Installing it
Download
After paying you get a ZIP. Unzip it; the folder is the whole effect.
Put it in your project
Drop the folder into your project and tell your AI assistant “Install this Unbland effect in my project.” No assistant? Paste the HTML version into Elementor’s HTML widget, or add one script tag to your page.
What you can change
- damping
- Under 1 is what gives it mass — it is what makes the button overshoot instead of stopping dead.
- pull · reach · max
- How far it leans, from how far away, and the cap it never passes.
- press
- How far it sinks when held. This half works on a touch screen.
- drag · dragMax
- How closely it follows a held finger, and where that travel runs out.
Every option is listed in the package, in plain words.
Requirements and testing
The standalone CSS translate property — every browser since 2022.
Driven and measured in a Chromium engine on macOS: the release oscillation, the drag's resistance curve, and a host transform surviving beside it. Not opened in Safari, Firefox, on a phone, in React or in WordPress.
Questions
Does it work on a phone?
The press and the drag do; the lean cannot, because a touch screen has no hovering pointer. A touch that turns into a scroll releases the button, so it never fights the page.
Will it break the CSS I already have on my button?
No. It writes the standalone translate and scale properties, so a transform of your own — a rotation, a framework animation — survives untouched beside it.
How do I know it will work on my site?
The demo on this page is the effect itself, running in your browser. If it runs here, it will run on your site in the same browser.
What does free actually mean here?
Use it in as many projects as you like, your own or your clients', commercially, for as long as you like. Keep the credit comment at the top of the source file. Don't sell it on, and don't republish it as your own effect or inside a template. That is the whole licence.
Can I use it on a client's website?
Yes, on as many as you like, and the client keeps theirs. Nothing to buy and nothing to register.
What's the catch?
There isn't one, but there is a reason. The effects we sell are whole scenes — a simulated water surface, a coil of photographs in real 3D. The free ones are one element or one layer. Same standard, smaller idea.
Something isn't working. What now?
Write to us at [email protected] — say which browser and device, with a link or a screenshot. Free effects have no support promise, but questions are answered as time allows.
