In this guide, we will show you how to add the “Overlay Button widget” to your Elementor website. The Overlay Button widget lets you create stylish buttons with a smooth hover overlay effect that instantly enhances user interaction. Perfect for drawing attention to call-to-action elements, this free widget gives your site a more dynamic and engaging feel—without the need for complex animations or custom code. With customizable options for overlay color, animation style, and button text appearance, the Overlay Button widget makes it easy to add a modern touch to any Elementor design.
Let’s explore the customization options available in the “Overlay Button widget” for Elementor below.
Add a Free Overlay Button to Elementor
Go to Unlimited Elements and click "Widgets".
Search for "Overlay Button" in the widget library.
Hover over the widget and click Install.
Add a Free Overlay Button Widget to an Elementor Page
Click "Add Element" in Elementor
Search for "Overlay Button" in the widget panel.
Drag and drop the “Overlay Button” into the container.
Elementor Overlay Button Widget General Settings
Button Text
Enter the text that will be displayed on the button.
Button Link
Set the URL or destination the button will navigate to when clicked.
Alignment
Control the horizontal positioning of the button within its container. Options include:
Left
Center
Right
Hover Animation
Select an animation effect to apply when the button is hovered. Options include:
Not Chosen (no animation)
Grow
Shrink
Pulse
Pulse Grow
Pulse Shrink
Push
Pop
Bounce In
Bounce Out
Rotate
Grow Rotate
Float
Sink
Bob
Hang
Skew
Skew Forward
Skew Backward
Wobble Vertical
Elementor Overlay Button Widget Style Settings
Button Typography
Customize the font, size, weight, and other text styling options for the button's label.
Background Color
Set the background color of the button.
Padding
Adjust the inner spacing of the button by setting values for Top, Right, Bottom, and Left.
Text Color
Define the default color of the button's text.
Text Color Hover
Set the text color when the button is hovered over.
Button Radius
Control the roundness of the button's corners to create rounded or circular shapes.
Button Border Type
Select the style of the button’s border. Options include:
Default
None
Solid
Double
Dotted
Dashed
Groove
Button Shadow
Add and customize a shadow effect to enhance the button’s depth and appearance.
Overlay Color
Set the background color of the overlay effect.
Overlay Width
Control the initial width of the overlay element.
Overlay Height
Control the initial height of the overlay element.
Overlay Width Hover
Set the overlay’s width when the button is hovered over.
Overlay Height Hover
Set the overlay’s height when the button is hovered over.
Position X
Define the horizontal starting position of the overlay.
Position Y
Define the vertical starting position of the overlay.
Overlay Button Widget Design Examples For Elementor
Here are some live use cases for the Overlay Button widget.
Image Zoom Magnifier with Overlay Button widget.
Semi-Circle Progress Bar with Overlay Button widget.
Thank you for using the Overlay Button widget for Elementor! Designed to add a sleek hover overlay effect to your buttons, this widget instantly boosts user engagement and brings a modern, interactive touch to your website. It’s perfect for highlighting call-to-action areas, improving the visual experience, and making your design more dynamic, without any complex animations or coding required. With customizable settings for overlay color, animation style, and button text, the Overlay Button widget gives you the flexibility to create buttons that stand out. If you have any questions or need assistance, feel free to reach out. For design ideas and live examples, don’t forget to check out the demo on our website.
