In this guide, we will introduce the “Liquid Button widget” for Elementor. The Liquid Button widget adds an eye-catching, fluid hover effect that creates an engaging and interactive experience for your users. Perfect for modern websites, this widget enhances buttons with a smooth transition that mimics liquid movement on hover. With customizable options for design and color, the Liquid Button widget helps you elevate your site’s visual appeal and user interaction.
Let’s explore the customization features available in the “Liquid Button widget” for Elementor below.
Add a Free Liquid Button to Elementor
Go to Unlimited Elements and click "Widgets".
Search for “Liquid Button" in the widget library.
Hover over the widget and click Install.
Add a Free Liquid Button Widget to an Elementor Page
Click "Add Element" in Elementor
Search for “Liquid Button" in the widget panel.
Drag and drop the “Liquid Button” into the container.
Elementor Liquid 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.
Button Alignment
Control the horizontal alignment of the button within its container.
Margin Around Button (px)
Adjust the outer spacing around the button in pixels.
Elementor Liquid Button Widget Style Settings
Background
Set the main background color of the button.
Gradient One
Define the first color for the button’s gradient effect.
Gradient Two
Define the second color for the button’s gradient effect.
Horizontal Padding
Adjust the internal spacing on the left and right sides of the button’s content.
Vertical Padding
Adjust the internal spacing on the top and bottom sides of the button’s content.
Border Radius
Control the roundness of the button’s corners.
Typography
Customize the font, size, weight, and other stylistic properties of the button’s text.
Text Color
Set the color of the button’s text.
Liquid Button Widget Design Examples For Elementor
Here are some live use cases for the Liquid Button widget.
Flip Box for a Portfolio with Liquid Button widget.
Before and After Widget for Photoshop with Liquid Button widget.
Thank you for using the Liquid Button widget for Elementor! This widget adds a smooth, fluid hover effect to your buttons, giving your site a modern and interactive feel. With customizable colors and animations, it’s perfect for enhancing call-to-actions and boosting user engagement. Need help? Reach out anytime, and check out our demo for inspiration.
