V4 Elements Button Pro Estimated reading: 5 minutes 2 views A button with eye-catching shapes and smooth hover moves. Pick one of six ready-made styles: a circle, an oval, an ellipse, a ripple, or a button with an icon that swaps sides. Every one is ready in one click. No code needed. WIDGET Button Pro READY STYLES 6 presets PLAN Pro A QUICK LOOK What You Will Build A button that changes when you point at it. The circle fills with color, and the Group Swap button moves its icon to the other side. The icon swaps sides when you point at the button BEFORE YOU START Requirement ELEMENTOR V4 Atomic ANIMATION ADDONS Free and Pro Note: Button Pro is a Pro widget. Install and activate both Animation Addons and Animation Addons Pro. Note: The free Button widget has its own page. Button Pro adds the extra shapes and the Group Swap and Ripple moves. Note: In the screenshots, the orange boxes and numbers show you exactly where to click. STEP 1 Turn On the Widget Good news: Button Pro is already on. If you ever need to turn it on again, it only takes a moment. In your WordPress Dashboard, go to Animation Addon > Widgets. Open the Elementor V4 (Atomic) tab. Under General Widgets, find Button Pro and switch it on. Click Save Settings. The Button Pro card in your dashboard (click to zoom) STEP 2 Add It to Your Page Open a page in the Elementor Editor and drop the button in. Click the + button at the top left to open the Elements panel. Type Button Pro in the search box. Drag it onto your page. Note: A new Button Pro is a dark pill with the words Click here and an arrow. STEP 3 Pick a Style The shape and the hover move come from a preset. Pick the one you like in one click. Select the button. In the General tab, open Presets. Click Apply a preset. Click a style. Apply a preset (1) (click to zoom) The six ready-made styles Note: A preset replaces your button’s design. Pick a preset first, then change the words. Circle A round button that fills with a new color when you point at it. Ellipse A wide, rounded button with a soft edge. Group Swap – L and Group Swap – R A pill and a round icon button side by side. On hover, they swap places. The icon sits on the right (L) or on the left (R). Oval An egg-shaped button that fills with a new color on hover. Ripple A flat button that fills with orange on hover, with a thin line next to the words. STEP 4 Set the Words and the Link Open the Button section in the General tab. Click Link and choose your page or paste an address. Switch Add Nofollow on if the link should not pass SEO value. In the page, click the words on the button and type your own. You can also click the words in the Structure panel. Link (1) and Add Nofollow (2) (click to zoom) Tip: Keep the words short, like Shop now or Let’s talk. STEP 5 Style It Click the button, or the words and the icon inside it, in the Structure panel. Then open the Style tab. Change the Background and the text Color. Change the Typography for the size and the weight. Use Spacing and Size to make the button bigger or smaller. Note: The text size and color of a button can come from your site’s default text style. If the words look too big or the wrong color, set them in the Style tab. RESULT Final Result All six presets. Point at each one to see its hover. The six Button Pro presets Circle The circle fills with a new color. Point at the button to see the hover Ellipse The ellipse changes its look when you point at it. Point at the button to see the hover Group Swap – L The pill and the icon swap places. Point at the button to see the hover Group Swap – R The icon button and the pill swap places. Point at the button to see the hover Oval The oval fills with a new color. Point at the button to see the hover Ripple The button fills with orange. Point at the button to see the hover SETTINGS Options Presets Six ready-made shapes and hover moves. Link Where the button goes. Add Nofollow Default: OffAdds nofollow to the link. ID Optional CSS ID. GOOD TO KNOW More Details The hover comes with the preset Each preset carries its own hover. To change the hover, apply another preset. Words and icon are parts The words and the icon are normal parts you can click and style. Many buttons Use a different preset for different buttons on the same page. HELP Troubleshooting I do not see Button Pro in the Elements panel This is a Pro widget. Make sure Animation Addons Pro is active. Then go to Animation Addon > Widgets > Elementor V4 (Atomic), switch on Button Pro and click Save Settings. My button words are too big or the wrong color Click the words in the Structure panel and set the size and the color in the Style tab. The hover does not move in the editor Hover effects work on your live page. Open the page and point at the button. I want a different hover Open Presets, click Apply a preset, and choose another style. Then write your words again. The two parts of Group Swap look far apart Group Swap is a pill and a round button side by side. Give the widget a little Spacing in the Style tab to fit your layout. You Did It Your page now has a button that people want to point at. If you face any problem, please contact our support team. We are happy to help.
