How to Create a Neon Button on Hover in WordPress Elementor Free

01/28/2025
Admin

Want to make your website stand out with glowing, interactive buttons? With Elementor Free, you can create a stunning neon button effect that lights up on hover, all without touching a single line of code! This guide will show you how to achieve this effect step by step.

Step 1: Add a Button Widget

Open your page in Elementor Free.
Drag and drop the Button widget onto your page.
Customize the button text to match your call-to-action, such as “Learn More” or “Shop Now.”

Step 2: Customize the Button Style

Select the button to open its settings.
Navigate to the Style tab.
Under Typography, adjust the font and size to suit your design.
Set the Text Color to a neutral shade, such as white, for better visibility.
Choose a dark Background Color to make the neon hover effect stand out.

Step 3: Add Neon Effect to the Hover State

Go to the Hover section under the Style tab.
Change the Background Color to a vibrant neon shade like pink, blue, or green.
Scroll to Box Shadow and enable it. Adjust the following settings:
- Horizontal Offset:
- Vertical Offset: 0
- Blur: 20-40 for a soft glow.
- Spread: 10-20 to emphasize the glow.
- Color: Match the neon shade of your background.

Step 4: Add Hover Text Glow

Under the Typography section in the Hover settings, enable Text Shadow.
Adjust the Text Shadow settings as follows:
- Horizontal and Vertical Offset: 0
- Blur: 10-20 for a glowing effect.
- Color: Match the text shadow color to the neon shade of the button background.

Step 5: Preview Your Neon Hover Effect

Click Update to save your changes.
Preview the page to see your glowing neon button come to life when hovered over.

Bonus Tip: Add Gradient Neon Glow

For an extra striking effect, use a gradient background on hover:

Under the Hover section, go to Background Type and select Gradient.
Choose two or more neon shades for the gradient.
Adjust the angle and location to create a dynamic glow effect.

Conclusion

With Elementor Free, creating a neon button hover effect is easy and impactful. This glowing design can make your call-to-action buttons more engaging and modern, helping your website stand out. Experiment with colors and shadows to customize the effect to your style.

Start designing and let your buttons shine!

CSS Code Snippet