In this guide, we’ll show you how to add the “Button Icon Hover widget” to your Elementor website. The Button Icon Hover widget resembles a regular button, but upon hover, the button text transforms into an icon of your choice, adding a sleek and interactive feel to your design. Perfect for modern call-to-actions and interactive UI elements, this Pro widget enhances user engagement with dynamic transitions and stylish effects. With advanced customization options for icons, text, hover animations, and styling, the Button Icon Hover widget adds professional flair to any Elementor layout.
Let’s explore the customization options available in the “Button Icon Hover widget” for Elementor below.
Add a Button Icon Hover Effect to Elementor
This widget requires Unlimited Elements Pro version installed and activated on your WordPress website
Go to Unlimited Elements and click "Widgets".
Search for "Button Icon Hover" in the widget library.
Hover over the widget and click Install.
Add a Button Icon Hover Effect Widget to an Elementor Page
Click "Add Element" in Elementor
Search for "Button Icon Hover" in the widget panel.
Drag and drop the “Button Icon Hover” into the container.
Elementor Button Icon Hover Effect Widget General Settings
Text
Enter the text that will be displayed on the button.
Icon
Preview, select, or change the icon displayed on the button.
Link
Set the URL or destination the button will navigate to when clicked.
Hover Direction
Choose the direction from which the icon will appear or animate when the button is hovered over:
Hover Down
Hover Right
Elementor Button Icon Hover Effect Widget Style Settings
Align
Control the horizontal alignment of the button within its container:
Center
Left
Right
Background Color
Set the background color of the button.
Color
Define the color of both the icon and text within the button.
Padding
Adjust the internal spacing between the button’s content and its edges. Padding can be set individually for Top, Right, Bottom, and Left.
Button Border Type
Select the style of the button’s border:
None
Solid
Double
Dotted
Dashed
Groove
Typography
Customize the font, size, weight, and other stylistic properties of the button’s text.
Button Radius
Control the curvature of the button’s corners. Values can be set for each corner: Top, Right, Bottom, and Left.
Button Shadow
Add and customize a shadow effect to give the button visual depth.
Background Color Hover
Set the background color of the button when hovered by the mouse pointer.
Button Border Hover Type
Choose the border style when the button is hovered.
None
Solid
Double
Dotted
Dashed
Groove
Icon Color
Set the color of the icon displayed on the button.
Hover Effect
Select an animation or visual effect that will be applied to the icon when hovered:
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
Wobble Horizontal
Wobble To Bottom Right
Wobble To Top Right
Wobble Top
Wobble Bottom
Wobble Skew
Buzz
Buzz Out
Icon Size
Control the overall size of the icon.
Button Icon Hover Effect Widget Design Examples For Elementor
Here are some live use cases for the Button Icon Hover widget.
Counter with Background Button Icon Hover widget.
Video Play Button with Button Icon Hover widget.
Thank you for using the Button Icon Hover widget for Elementor! This widget looks like a regular button, but on hover, the text changes into an icon of your choice, enhancing user interaction. It seamlessly combines text and icons to create dynamic, engaging buttons—perfect for call-to-actions and interactive elements. With customizable options and smooth hover effects, it’s a great way to elevate your website’s user experience. Need help? Contact us or check out our demo for ideas.
