In this guide, we will show you how to add the “Gradient Border Button widget” to your Elementor website. The Gradient Border Button widget lets you create stylish, animated buttons with customizable gradient borders that enhance your site’s visual appeal. Perfect for making attention-grabbing call-to-action buttons, this widget adds unique styles that complement any modern web design. With options to adjust gradient colors, button text, and other styling features, the Gradient Border Button widget helps you create buttons that align perfectly with your brand’s aesthetics.
Let’s explore the customization options available in the “Gradient Border Button widget” for Elementor below.
Add a Gradient Border Button to Elementor
This widget requires Unlimited Elements Pro version installed and activated on your WordPress website.
Add a Gradient Border Button Widget to an Elementor Page
Elementor Gradient Border Button Widget General Settings
Text
Sets the visible button text.
Link
Specifies the URL the button directs to.
Alignment
Control the horizontal positioning of the button within its container. Options include:
Left: Aligns the button to the left.
Center: Centers the button.
Right: Aligns the button to the right.
Glow
Adds a glowing effect to the button.
Moving Border Gradient
Enables an animated gradient border.
Movement On
Specify when the gradient border movement animation should occur. Options include:
Normal State: The animation runs continuously in the button’s default state.
Hover State: The animation runs only when the button is hovered.
Both: The animation runs in both the normal and hover states.
Time (s)
Sets the animation duration in seconds.
Icon
Allows adding an icon to the button.
Elementor Gradient Border Button Widget Style Settings
Background Type
Define the type of background for the button. Options include:
Color: A single, solid color.
Gradient: A blend of two or more colors.
Normal/Hover Tabs (First Set)
Set styles for background and padding in normal and hover states.
Background Color
Sets the solid background color (for “Color” type).
Padding
Controls inner spacing around button content.
Border Radius
Adjusts the roundness of button corners.
Border Width (px)
Sets the thickness of the button border.
Border Gradient First Color
Sets the starting color of the border gradient.
Border Gradient Second Color
Sets the ending color of the border gradient.
Gradient Angle (deg) (Border)
Controls the direction of the border gradient.
Normal/Hover Tabs (Second Set - Glow)
Set glow styles for normal and hover states.
Glow First Color
Sets the starting glow color.
Glow Second Color
Sets the ending glow color.
Gradient Angle (deg) (Glow)
Controls the direction of the glow gradient.
Typography
Controls font family, size, weight, line height, letter spacing, and text transform for the button text.
Fill Type
Choose solid color or gradient for the text.
Normal/Hover Tabs
Set text styles for normal and hover states.
Color
Sets the text color (for solid color fill) or first/second gradient colors if gradient is selected.
Gradient Border Button Widget Design Examples For Elementor
Here are some live use cases for the Gradient Border Button widget.
Slider Gallery with Gradient Border Button widget.
Image Card Content Box with Gradient Border Button widget.
Thank you for using the Gradient Border Button widget for Elementor! This widget adds a stylish animated gradient border to your buttons, perfect for eye-catching call-to-actions. Customize gradient colors, text, and styles to match your brand’s look. For help or demos, feel free to contact us or visit our website.
