Magnetic Lift
A springy easing curve lifts and slightly scales the button on hover.
How to apply a CSS button style
1
Add a button
Drag a plain Button element onto your page — no need for a fancy one, the animation comes from the code you'll add.
2
Set its text and size
Use the standard style panel to set size, font and label. Skip colors and shadows — the code overrides those.
3
Open the Custom CSS panel
Click the button → in the right-side panel, find the { } icon (Custom CSS) → this opens the code editor for that specific element.
4
Copy the ready-made CSS code
On the button's page in the catalog, click Copy CSS — the code will be copied to your clipboard automatically.
5
Paste the code into the Custom CSS panel
Go back to Wix Studio and paste the copied code into the open panel. Save your changes.
6
Check the result in Preview
Hover over the button in preview mode — the animation should trigger, then click Publish to go live.
FAQ
CSS Button Styles
Quick answers on how we work, what's included, and what happens if you're not sure where to start.
Add a plain Button element to your page, select it, and open its Custom CSS panel (the { } icon in the right-side panel). Copy the CSS code from the button's page in our catalog and paste it in there. Save, then check the hover effect in Preview before publishing.
Yes — but it needs to happen inside the pasted CSS code, not through Wix's regular design panel. Open the Custom CSS code, find the relevant line (background, color, border-radius, etc.) and edit the value directly. If you change the same property through the design panel instead, the two can conflict and the effect may stop working or look broken — so once a style is applied via code, keep making adjustments in that same code.
Not for the basic setup — copying and pasting the code as-is is enough to get the full effect working. You'll only need to look at the code yourself if you want to customize something specific, like the color or size, and even then it's usually just editing a value, not writing new code.
Each style is written to apply to one specific button, so it won't affect other elements on your page. That said, if the button you're applying it to already has other custom CSS or manual styling on it, those rules can clash with the new code — it's best to start from a plain, unstyled button.
Yes, all the styles are responsive and will display correctly on phones and tablets. Keep in mind that hover effects (glow, lift, color change) are triggered by a mouse cursor, so on touch devices visitors will see the button's default look rather than the hover state — this is normal browser behavior, not a bug in the code.
No. These are lightweight CSS snippets with no external scripts, fonts, or files being loaded — so there's no measurable impact on page speed.
Open the Custom CSS panel for that button and delete the pasted code, then save. The button will go back to its original default Wix styling automatically.
Email us at support@wixfull.com with a link to your page (or a screenshot) and we'll help you figure out what's going on.
