Skip to content Icon Spin Button Template for Elementor
Add a touch of motion and personality to your website with this animated Icon Spin Button. The subtle SVG rotation on hover gives your call-to-action a modern, dynamic feel — perfect for menus, feature sections, or landing pages.
How to Use This Button in Elementor
Step 1: Download the Template
Click the “Get This Template” button on this page. You’ll get a ready-to-use .json file for Elementor.
Step 2: Import It into Elementor
Go to your WordPress dashboard, then navigate to Elementor → Templates → Import Templates. Upload the file and hit Import Now.
Step 3: Place the Button Where You Need It
Edit your page with Elementor, click the folder icon, switch to the My Templates tab, and insert the button wherever it fits your layout.
What Makes This Button Special?
• Animated SVG icon that spins on hover
• Smooth and lightweight — no JavaScript required
• Fully editable in Elementor (background, text, padding, colors, etc.)
• Uses a clean custom CSS class with no extra HTML clutter
• Works with the **free version** of Elementor
Built with a Custom CSS Class
This button uses a CSS class called .button1. All the animation is handled via CSS, and the style code is added inside an HTML widget near the button. This keeps your design modular and clean.
Want to Duplicate the Button?
Right-click the button and choose Duplicate inside Elementor. Since all styling is tied to the CSS class, every copy will behave the same automatically.
⚠️ Small Tip for Spacing
If the icon looks too close to the text, don’t worry — just open the Style tab in Elementor and slightly increase the **left padding**. This gives the icon more breathing room without touching the CSS.
Give your Elementor site some motion and style with the Icon Spin Button — elegant, animated, and easy to use!