CSS Snippet:
Button Pulse Hover Effect
This CSS snippet creates a gentle pulse animation when a user hovers over a button. The effect subtly scales the button up and down, giving it a lively and interactive feel.
It’s a simple way to draw attention to important actions without being overly distracting.
Difficulty:
Easy
Live preview
Pulse Hover
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 a button to feel more energetic and interactive. The pulse animation naturally draws attention to the element and can help highlight primary actions.
It works particularly well for call-to-action buttons such as “Start Free Trial”, “Sign Up”, or “Join Now”.
Where to apply it
Apply this class to buttons where you want a subtle pulse animation on hover.
Common examples include:
• Primary call-to-action buttons
• Signup or trial buttons
• Promotional action buttons
• Hero section buttons
Notes & Setup
Select your button in Wix Studio.
Add the class: pulse-hover
Paste the CSS into your site's Custom CSS section.
Adjust the scale values if you want a stronger or softer pulse effect.
This CSS only creates the pulse animation; 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
.pulse-hover {
transition: transform 0.2s ease;
}
.pulse-hover:hover {
animation: buttonPulse 0.6s ease;
}
@keyframes buttonPulse {
0% { transform: scale(1); }
50% { transform: scale(1.06); }
100% { transform: scale(1); }
}
