Animated Circle Button Widget

Bring your icon and text together in a stunning circular layout — complete with smooth hover and click animations — using the Animated Circle Button Widget.

Follow the step-by-step instructions:

1. Go to Menu RTMKit Pro.

2. Then, you’ll see the Animated Circle Button Widget appear.

3. Click Add New Container.

4. Select your layout : Flexbox or Grid.

5. On the canvas select your structure.

6. Drag the widget from the Elementor 

7. Drop it on the selected area.

8. Setting Text Path :

• Click Content → Text Path.
• Enable or Disable Show Text and Text Animation. If Show Text is enabled, fill in the text area with your desired content.

9. Setting Button :

• Click Content → Button.
• Choose your Button Style, either With Icon or With Image.
• If you select With Icon, you can add Hover Animation Infinite and Hover Animation Icon effects for a more lively button.
• Click on the Icon Library, and select the icon you’d like to use.

10. Setting Pulse Effect:

• Click Content → Pulse Effect.
• Enable the Pulse Animation to make your button more eye-catching.

11. Wrapper Style (used to customize the wrapper style) :

• Click Style → Wrapper.
• Go to the style tab to customize the overall look of your button.
• Adjust the alignment, background type, width, margin, border style, border color, and border size.

12. Text Style (used to customize the text style) :

• Click Style → Text.
• You can modify typography, width, text rotate, text stroke, and text color.
• Click the Hover tab, and set your hover text color for added interaction.

13. Button Style (used to customize the button style) :

• Click Style → Button.
• You can adjust the width, border type, border color, border size, box shadow, and background color.
• On the Hover tab, add a background hover color and choose a hover animation that suits your style.
• You can also set the icon size and apply rotation for a more dynamic effect.
• Choose both the icon color and the hover icon color to complete the look.

14. Effect Style (used to customize the effect style) :

• Click Style → Effect.
• Apply your background color effect, then customize the timing for animated text and pulse to get just the right motion feel.

15. Now, just click Publish to save and bring your animated circle button to life.