CSS Snippet:
Button Gradient Slide Effect
This CSS snippet creates a sliding gradient animation when a user hovers over a button. The effect works by using a larger gradient background and shifting its position during hover.
It’s a simple way to create a modern, eye-catching button interaction without relying on JavaScript or complex animations.
Difficulty:
Easy
Live preview
Gradient Slide
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
Use this effect when you want to give buttons a more dynamic and modern feel. The sliding gradient draws subtle attention to the button and makes the interface feel more interactive.
It works particularly well for call-to-action buttons such as “Get Started”, “Sign Up”, or “Learn More”.
Where to apply it
Apply this class to buttons where you want a smooth animated gradient hover effect.
Common examples include:
• Primary call-to-action buttons
• Hero section buttons
• Pricing page buttons
• Signup or registration buttons
Notes & Setup
Select your button in Wix Studio.
Add the class: gradient-slide
Paste the CSS into your site's Custom CSS section.
Adjust the gradient colours to match your site’s design, or increase the transition time if you want a slower animation.
This works best on buttons where the background colour is controlled by the CSS rather than the native button styling.
This CSS only controls the gradient animation; use the Wix Studio side panel to style your button text, padding, and border radius.
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
.gradient-slide {
background: linear-gradient(90deg, #4f46e5, #06b6d4, #4f46e5);
background-size: 200% 100%;
transition: background-position 0.35s ease;
}
.gradient-slide:hover {
background-position: 100% 0;
}
