In this guide, we’ll show you how to add the “Icon Pointer Button widget” to your Elementor website. The Icon Pointer Button widget helps you create interactive buttons enhanced with stylish icon pointers, directing attention to important pages or sections of your site. Ideal for boosting navigation and adding a modern, visual touch, this Pro widget allows you to customize the icon’s style, position, size, and hover animation to match your site’s branding. Whether you want to highlight calls to action or simply enhance user interaction, this widget offers a sleek and engaging way to do it.
Let’s explore the customization options available in the “Icon Pointer Button widget” for Elementor below.
Elementor Icon Pointer Button Tutorial Video
Add an Icon Pointer Button 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 "Icon Pointer Button" in the widget library.
Hover over the widget and click Install.
Add an Icon Pointer Button Widget to an Elementor Page
Click "Add Element" in Elementor
Search for "Icon Pointer Button" in the widget panel.
Drag and drop the “Icon Pointer Button” into the container.
Elementor Icon Pointer Button Widget General Settings
Text
Enter the text that will be displayed on the button.
Icon
Select or change the icon that appears alongside the button text.
Link
Set the URL or destination that the button will navigate to when clicked.
Align
Controls the horizontal alignment of the button. Options include:
Center
Left
Right
Direction
Determines the order of the icon and text within the button. Options include:
Icon First
Icon Last
Elementor Icon Pointer Button Widget Style Settings
Icon Width
Adjust the overall width of the icon.
Icon Background Color
Set the background color behind the icon.
Icon Background Hover
Define the background color of the icon area when hovered.
Icon Color
Set the default color of the icon.
Icon Color Hover
Set the icon color when the button is hovered over.
Icon Rotate On Hover
Specify the degree of rotation for the icon on hover.
Icon Size
Control the size of the icon.
Button Typography
Customize the font, size, weight, and other text styles for the button's text.
Background Color
Set the default background color of the button.
Background Color Hover
Define the background color of the button when hovered.
Button Text Color
Set the default color of the button’s text.
Button Text Color Hover
Set the text color when the button is hovered over.
Button Radius
Adjust the roundness of the button's corners to create rounded or circular shapes.
Text Padding
Control the internal spacing of the button’s content by setting values for Top, Right, Bottom, and Left.
Button Minimum Width
Set a minimum width for the button to ensure it maintains a consistent and readable size.
Button Border Type
Selects the style of the button’s border. Options include:
Default
None
Solid
Double
Dotted
Dashed
Groove
Button Border Hover Type
Sets the border style when hovering over the button. Options include:
Default
None
Solid
Double
Dotted
Dashed
Groove
Pointer Width
Adjust the horizontal size of the pointer element.
Pointer Height
Adjust the vertical size of the pointer element.
Show Pointer
Toggle the visibility of the pointer element on or off.
Icon Pointer Button Design Examples For Elementor
Here are some live use cases for the Simple Icon Pointer Button widget.
Image Zoom Content Box with Simple Icon Pointer Button widget.
Before and After Widget with Simple Icon Pointer Button widget.
Thank you for using the Icon Pointer Button widget for Elementor! This Pro widget helps you create stylish, interactive buttons with customizable icon pointers—perfect for guiding attention to key sections and enhancing navigation. With flexible styling and hover effects, it’s a great way to boost engagement. Need help? Contact us or explore our demo for inspiration.
