Icon Button Widget #
The Icon Button widget allows you to create attractive, interactive buttons with icons and smooth hover animations. Perfect for call-to-action buttons, navigation links, download buttons, and any clickable element that needs visual appeal and professional styling.
Live Demo: https://turbo-addons.com/icon-button/
How to Use the Icon Button Widget #
Step 1: Add the Widget
- Open a page in the Elementor Editor.
- Search for Icon Button.
- Drag and drop the widget into your desired section.
Step 2: Configure Content
Go to Content tab → Content section.
Button Text
- Enter your button label text (e.g., “Click Here”, “Download Now”, “Contact Us”).
- Default text is “Click Button”.
- Supports multi-line text for longer labels.
Icon
- Click the icon selector to choose from Font Awesome icons.
- Upload custom SVG icons if needed.
- Default icon is a right arrow (fas fa-arrow-right).
Link
- URL – Enter the destination link (e.g., https://example.com, #section, mailto:email@domain.com).
- Open in new window – Enable for external links.
- Add nofollow – Enable for SEO purposes (affiliate links, etc.).
Step 3: Style the Button
Go to Style tab → Button.
Button Width
- Set custom button width in pixels or percentage.
- Leave empty for auto-width based on content.
Alignment
- Left – Align button to the left.
- Center – Center the button (default).
- Right – Align button to the right.
Normal State Styling
- Background – Set solid color, gradient, or image background.
- Padding – Control internal spacing around text and icon.
- Border – Add border with custom width, style, and color.
- Border Radius – Create rounded corners (0-100px).
- Box Shadow – Add depth with shadow effects.
Hover State Styling
- Configure separate styling that appears when users hover over the button.
- All normal state options are available for hover effects.
Step 4: Style Typography
Go to Style tab → Typography.
Typography Settings
- Font Family – Choose from available fonts.
- Font Size – Set text size (responsive supported).
- Font Weight – Control text thickness.
- Line Height – Adjust line spacing.
- Letter Spacing – Control character spacing.
Text Colors
- Normal – Set default text color.
- Hover – Set text color on hover.
Step 5: Style the Icon
Go to Style tab → Icon.
Icon Position
- Left – Place icon before the text (default).
- Right – Place icon after the text.
Icon Size
- Adjust icon dimensions (10-100px).
- Default size is 18px.
Top Position
- Fine-tune vertical icon alignment (0-100px).
- Default is 3px for optimal alignment.
Normal State
- Icon Color – Set default icon color.
- Icon Spacing – Control gap between icon and text (0-50px for left, 0-100px for right).
Hover State
- Icon Color – Set icon color on hover.
- Icon Spacing – Adjust spacing on hover for animation effects.
Step 6: Add Button Animation
Go to Style tab → Button Animation.
Animation Effect
Choose from 8 different hover animations:
- None – No animation (default).
- From Left – Slide effect from left side.
- From Right – Slide effect from right side.
- From Top – Slide effect from top.
- From Bottom – Slide effect from bottom.
- Expand Vertical – Vertical expansion animation.
- Expand Horizontal – Horizontal expansion animation.
- Expand Circular – Circular expansion effect.
- Reveal Radial – Diagonal reveal animation.
Effect Background
- Set the color or gradient for the animation overlay.
- This creates the visual effect during hover animations.
Step 7: Advanced Options
Use Elementor’s Advanced tab for:
- Margin & padding
- Responsive visibility
- Motion effects
- Custom CSS (optional)
✅ Final Output #
The Icon Button widget creates a professional, interactive button with customizable icons, smooth animations, and responsive design—perfect for call-to-action elements, navigation, and user engagement.
💡 Tips for Better Results #
- Use contrasting colors between button background and text for better readability.
- Keep button text short and action-oriented (e.g., “Buy Now”, “Learn More”).
- Test on mobile devices to ensure buttons are large enough for touch interaction.
- Choose animations wisely – subtle effects work better for professional sites.
- Use consistent styling across all buttons on your site for brand coherence.
- Optimize icon size for faster loading and better visual balance.
