In this guide, we’ll show you how to use the free “Underline Animated Button widget” in Elementor. This widget allows you to create interactive buttons that appear as simple underlined text links until hovered over, at which point they transform into bordered buttons. The smooth animation adds subtle interactivity and helps boost user engagement. With customizable options for border color, typography, and alignment, the Underline Animated Button widget makes it easy to match your site’s design and elevate its visual appeal.
Let’s explore the customization options available in the free “Underline Animated Button widget” for Elementor below.
Add a Free Underline Animated Button to Elementor
Go to Unlimited Elements and click "Widgets".
Search for "Underline Animated Button" in the widget library.
Hover over the widget and click Install.
Add a Free Underline Animated Button Widget to an Elementor Page
Click "Add Element" in Elementor
Search for "Underline Animated Button" in the widget panel.
Drag and drop the “Underline Animated Button” into the container.
Elementor Underline Animated Button Widget General Settings
Text
Enter the text that will be displayed on the button.
Link
Set the URL or destination that the button will navigate to when clicked.
Border Color
Define the color of the button's border.
Alignment
Control the horizontal positioning of the button within its container. Options include:
Center
Left
Right
Elementor Underline Animated Button Widget Style Settings
Enable Styles
Toggle to enable or disable custom styling options for the button text.
Typography
Customize the font, size, weight, line height, letter spacing, and other text-related styles for the button text.
Color
Set the color of the button’s text.
Custom Styles
Input custom CSS or specific style declarations for advanced text styling.
Underline Animated Button Widget Design Examples For Elementor
Here are some live use cases for the Underline Animated Button widget.
Particles Background with Underline Animated Button widget.
Snow Background with Underline Animated Button widget.
Thank you for using the Underline Animated Button widget for Elementor! This free widget transforms a simple underlined text link into a bordered button on hover, adding a subtle yet effective interactive touch to your website. It’s perfect for enhancing user engagement, drawing attention to important links, and giving your design a modern, polished feel—all without any complex coding. With customizable options for border color, typography, and alignment, the Underline Animated Button widget offers the flexibility to match your site’s unique style. If you have any questions or need support, we’re here to help. Be sure to explore our demo page for inspiration and live examples.
