CSS Snippet:

Button Glow Hover Effect

This CSS snippet adds a subtle glow effect when a user hovers over a button. The glow is created using layered box-shadows and a smooth transition, helping the button stand out and feel more interactive.

It works particularly well for call-to-action buttons where you want a little extra visual emphasis without being distracting.

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

Glow 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 to highlight important buttons such as call-to-actions, signup buttons, or primary navigation actions.

The glow adds visual feedback when users hover over the element, making the interface feel more responsive and polished.

Where to apply it

Apply this class to buttons where you want to create a subtle glowing hover interaction.

It works best on solid buttons with a background colour, and is commonly used on:

• Call-to-action buttons

• Signup or login buttons

• Pricing page buttons

• Promotional action buttons

Notes & Setup

Select your button in Wix Studio.
Add the class: glow-hover
Paste the CSS into your site's Custom CSS section.

Adjust the rgba values to change the glow colour, or increase the box-shadow values if you want a stronger glow effect.

This works best on buttons with a solid background colour.

This CSS only creates the glow interaction; style the button itself using the native controls in the Wix Studio side panel.

Tip: You can also remove the translateY line if you want the button to glow without lifting.

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

.glow-hover {
transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.glow-hover:hover {
box-shadow: 0 0 12px rgba(0,123,255,0.6),
0 0 24px rgba(0,123,255,0.4);
transform: translateY(-2px);
}