The Gradient Border Button widget is a sleek and dynamic addition to your website’s design toolkit. It introduces an eye-catching gradient border animation to your buttons, making them more visually appealing and perfect for highlighting call-to-action elements. Ideal for grabbing attention and driving user interaction, this widget ensures your buttons stand out with style.
Let’s look at each of the options in the “Gradient Border Button” below.
Install Gradient Border Button widget for Elementor #
This widget requires Unlimited Elements PRO version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Gradient Border Button”
- Hover over the widget in the search results and click install
- Add your “Gradient Border Button” widget to any Elementor Page
General Settings #
Text
Type text to show in the button.
Link
Type or paste URL to link with the button.
Alignment
Set the alignment of button.
- Left
- Center
- Right
Glow
Turn on the glow effect on button.
Glow Value(px)
Set the glow value in pixels.
Blink
Turn on or off the blink effect of glow.
Time
Set the timer for glow effect.
Moving Border Gradient
Turn on the moving border gradient.
Movement On
Set the state for border gradient movement.
- Normal State
- Hover State
- Both
Time
Set the timing for gradient border movement.
Icon
Choose an icon to display.
Layout
Set the layout of icon.
- Icon Before
- Icon After
Gap
Set the gap between icon and text.
Button Styling #
You can set background, padding, border and glow colors.
Text Styling #
Set the typography, fill color for normal and hover state.
Icon Styling #
Set the icon size, fill type, fill color in normal and gradient state.
Usage Examples #
Here are some live use cases for the Gradient Border Button widget.
