V4 Elements Button Estimated reading: 6 minutes 7 views A button that comes to life when someone points at it. Pick one of eight hover styles in one click, then add your own text and link. No code needed. WIDGET Button HOVER STYLES 8 ready-made presets PLAN Free A QUICK LOOK What You Will Build All eight styles on one page. Each one reacts in its own way when the mouse comes close. The eight Button styles BEFORE YOU START Requirement ELEMENTOR V4 Atomic ANIMATION ADDONS Free Tip: Install and activate Animation Addons first. That is all you need. Note: In the screenshots, the orange boxes and numbers show you exactly where to click. STEP 1 Turn On the Widget Good news: the Button 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. Find Button under General Widgets and switch it on. Click Save Settings. The Button card in your dashboard (click to zoom) Note: Do not mix it up with Button Pro. This page is about the free Button. 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. Look under AAE General for Button. Drag it onto your page. The Button in the Elements panel (click to zoom) Tip: Can not see it? Type Button in the search box at the top of the panel. Note: A new Button is a dark box with a small icon and the words Click here. STEP 3 Pick a Hover Style The hover style is what happens when someone moves the mouse over the button. Each style is a preset. Click your Button to select it. In the General tab, open Presets. Click Apply a preset. Click the style you like. You will see it on your page right away. The eight Button presets (click to zoom) Tip: You can change your mind any time. Open Apply a preset again and pick another one. STEP 4 Write Your Button Text The words on the button are a separate part called Paragraph. You edit it like any text. Click the words on the button, or open the Structure panel and open the Button. Click the Paragraph part. In the General tab, type your text in the Paragraph box. Type your own words here (click to zoom) Tip: Buttons in this widget show their words in CAPITAL letters by default. You can change that in the Paragraph Style tab, under Typography. STEP 5 Add a Link Tell the button where to go when it is clicked. Select the Button itself, not the text inside it. In the General tab, open Button. Click the + next to Link. Type or paste the address. Choose to open it in a new tab if you like. Switch on Add Nofollow if you want a nofollow link. Click Update to save your page. Link (1), Add Nofollow (2) and Hover Style (3) (click to zoom) STEP 6 Style It Make it match your brand. Select the Button and open the Style tab. Open Background and change the Color. Open Spacing to make the button bigger or smaller inside. Open Border to round the corners. Click the text part and use its own Style tab for the font and the text color. Tip: A new Button has a dark blue background (#3d405b), white text, 12px text size, and rounded corners of 8px. RESULT The Eight Hover Styles Move your mouse over each one on a live page. Here is what happens, one style at a time. Default Preset name: button-free-default. The button changes color. Move your mouse over the button to see the default effect Mask Preset name: button-free-mask-div. The button turns dark. Move your mouse over the button to see the mask effect Shadow Preset name: button-free-shadow-div. A soft shadow shows up and the button lifts. Move your mouse over the button to see the shadow effect Underline Preset name: button-free-underline-div. The line under the button grows. Move your mouse over the button to see the underline effect Slide Fill Preset name: button-free-slide-fill-div. A color slides in and fills the button. Move your mouse over the button to see the slide fill effect Outline Pill Preset name: button-free-outline-pill-div. A pill inside the button slides away. Move your mouse over the button to see the outline pill effect Border Divide Preset name: button-free-border-divide-div. The icon splits into pieces. Move your mouse over the button to see the border divide effect Text Flip Preset name: btn-free-text-flip. The words flip upward. Move your mouse over the button to see the text flip effect SETTINGS Options Presets Eight ready-made hover styles. Link Where the button goes when someone clicks it. Add Nofollow Default: OffAdds nofollow to the link. Hover Style A list that appears in the Button section. Pick a style from the presets first. Paragraph (part) The words on the button. ID Optional CSS ID for the button. GOOD TO KNOW More Details One link, one button The link lives on the Button. Click the Button in the Structure panel, not the text. Icon Some styles include a small icon next to the words. It is a separate part called SVG. You can change it or delete it. Presets can change the parts Each style builds its own parts, so apply a preset first and then type your text. HELP Troubleshooting I do not see the Button in the Elements panel Go to Animation Addon > Widgets > Elementor V4 (Atomic) and turn on Button. Click Save Settings, then reload the editor. Look under AAE General, or use the search box. My text looks huge or green Your site may have its own default for paragraph text. Click the Paragraph part, open the Style tab and set the size and color. The hover effect does not show in the editor Hover effects work on your live page. Open the page to try them. My button text did not change after I picked a preset Apply the preset first. Then click the Paragraph part and type your text again. The link does not work Click the Button in the Structure panel, not the text inside it, and set the Link there. Then click Update. You Did It Your page now has a button people want to point at. If you face any problem, please contact our support team. We are happy to help.
