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

1. Open a page in the Elementor Editor.
2. Search for Icon Button.
3. 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.