CSS Snippet:

Button Hover Lift Effect

Adds a smooth lift and shadow effect when a user hovers over a button, making calls-to-action feel more interactive and polished.

Difficulty:

Easy

Promotion

Need help with your Wix website?

Fix a problem, rebuild your site, or get your SEO set up properly.

Expert Wix support, exactly when you need it.

Find out more

Start Now

Live preview

Hover Lift

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Use case

Perfect for primary call-to-action buttons such as Buy Now, Get Started, or Book a Call.

This subtle animation helps buttons feel more responsive without being distracting.

Where to apply it

Add a custom class to the button in Wix Studio and paste this CSS into your Custom CSS section.

Notes & Setup

Select your button in Wix Studio.

Add the class: hover-lift
Paste the CSS into your site's Custom CSS section.
Adjust the translateY or box-shadow values if you want a stronger or softer effect.

This works best on buttons with a solid background colour.

This CSS only creates the hover lift animation; make sure to style your button using the native controls in the Wix Studio side panel.

Licensing

This CSS snippet is free to use in personal and commercial Wix Studio projects. You’re welcome to copy, adapt, and use it on client or business websites.

Credit is not required, but if you found it useful, we’d really appreciate a small link back to Wix Doctor, ideally on your site’s footer, about page, credits page or wherever feels appropriate.

Linking back helps more Wix users discover the library and supports the continued creation of free snippets, tutorials, and community resources.

CSS Code

css

.hover-lift {
transition: transform .25s ease, box-shadow .25s ease;
}

.hover-lift:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}