--- title: "How to Add an Animated Download Button in Elementor?" url: https://theplusaddons.com/docs/add-an-animated-download-button-in-elementor/ date: 2024-05-14 modified: 2026-09-27 lang: en author: "Aditya Sharma" description: "Set Button Type to Download on the Advanced Buttons widget to turn it into a one-click file-download button. This was tested with a real browser click: the button downloads the..." image: https://theplusaddons.com/wp-content/uploads/2024/05/How-to-Add-an-Animated-Download-Button-in-Elementor_-1024x536.jpg word_count: 501 --- # How to Add an Animated Download Button in Elementor? ## - The Plus Addons for Elementor’s Advanced Buttons widget turns Button Type set to Download into a one-click file-download button with no page navigation. - Style 1 triggers an actual same-origin file download in a browser, adds the downloaded CSS class immediately, and removes it again 5 seconds later. - Loading Text and Success Text work only on Style 2, Style 4, and Style 5, while the default Style 1 never shows them and JavaScript must be enabled for the download to run. Set **Button Type** to **Download** on the Advanced Buttons widget to turn it into a one-click file-download button. This was tested with a real browser click: the button downloads the linked file directly, with no page navigation. For the full settings tour of the **Advanced Buttons** widget, see [How to Add Advanced Buttons in Elementor](https://theplusaddons.com/docs/add-advanced-buttons-in-elementor/). ***Requirement - This widget is a part of The Plus Addons for Elementor, make sure it's installed & activated to enjoy all its powers.*** [LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/advanced-buttons/?utm_source=tpae&utm_medium=docs&utm_campaign=text) ## Before You Start - **Prerequisite:** [Elementor](https://wordpress.org/plugins/elementor/) (free) installed and active.- **Widget to enable:** go to **The Plus Addons > Widgets**, search for **Advanced Buttons** and turn its toggle on.- **Prerequisite:** the file you want visitors to download, uploaded to your Media Library or linked by URL. ## Steps - Add the **Advanced Buttons** widget, then set **Button Type** to **Download**.- Choose a **Style** for the download button (styles are numbered; the default is Style 1).- Under **Link**, point the button at the file to download.- Set **Download File Name** - this becomes the saved file's name in the visitor's browser.- If you want a loading/success text swap while the file downloads, pick **Style 2**, **4** or **5** and set **Loading Text** and **Success Text** (see Limitations - the default Style 1 does not use them). ![Button Type set to Download in the Advanced Buttons content panel](https://theplusaddons.com/wp-content/uploads/2026/09/advanced-buttons-download-type.webp) ![Style dropdown showing the Download button presets](https://theplusaddons.com/wp-content/uploads/2026/09/advanced-buttons-download-style.webp) ![Download File Name field](https://theplusaddons.com/wp-content/uploads/2026/09/advanced-buttons-download-filename.webp) ## How It Behaves Confirmed with a real click test in a browser (not inferred from source): clicking a Style 1 Download button triggers an actual same-origin file download with no page navigation - the widget's own JavaScript calls `preventDefault()`, builds a hidden link with the configured file and file name, and clicks it. The button's own `downloaded` CSS class is added the instant you click and removed again 5 seconds later. ## Settings Overview | Setting | What it does | Default | | ------- | ------------ | ------- | | Style | Picks one of 5 download-button presets; each has different click behaviour. | Style 1 | | Loading Text | Text shown while the style's own loading state is active. | downloading... | | Success Text | Text shown once the style's own success state fires. | done! | | Download File Name | The file name the browser saves the download as. | download | ## Limitations - **Loading Text and Success Text only take effect on Style 2, Style 4 and Style 5.** This was confirmed by reading the widget's click handler for every style: Style 1 (the default) only toggles a `downloaded` class for 5 seconds with no text change; Style 3 was not tested. If you set Loading/Success Text on the default style, a visitor will never see them - switch to Style 2, 4 or 5 first.- The download is triggered by the widget's own JavaScript, so it will not work for visitors with JavaScript disabled. ## Troubleshooting ### Loading Text or Success Text never appears Check which **Style** is selected. Only Styles 2, 4 and 5 show these texts; the default Style 1 never does (see Limitations). ## Not verified So you know exactly what has and has not been checked: - The visible loading/success text swap on Styles 2, 4 and 5 - confirmed only by reading the click-handler source, not yet observed on the front end.- Style 3's click behaviour.- Free vs Pro control split. ## Related Docs - [How to Add Advanced Buttons in Elementor?](https://theplusaddons.com/docs/add-advanced-buttons-in-elementor/) ## Frequently Asked Questions **Q: What do I need before adding an animated download button in Elementor?** A: Elementor free has to be installed and active, and the Advanced Buttons widget must be enabled under The Plus Addons > Widgets. The file also needs to already exist in your Media Library or be linked by URL. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH provides the Advanced Buttons widget, so the download button depends on that widget being turned on first. **Q: How do I make a button download a file instead of opening a page?** A: Set Button Type to Download in the Advanced Buttons widget, then point the Link field at the file you want visitors to get. That turns the button into a one-click file-download control with no page navigation. In the browser test described on the page, clicking the button downloaded the linked file directly, which is the behavior you want when the goal is a clean download action. **Q: Which style should I use if I want loading text or success text to show?** A: Style 2, Style 4, and Style 5 are the only styles that use Loading Text and Success Text. Style 1 is the default, but it does not swap text during the download state. That matters because if you pick Style 1 and fill in those fields anyway, visitors will never see them. For a visible status change, start with one of those three styles instead. **Q: Why isn't my loading text showing on the download button?** A: The most common cause is using Style 1. The page says Loading Text and Success Text only take effect on Style 2, Style 4, and Style 5, while Style 1 just adds a downloaded class for 5 seconds with no text change. That means the setting can be correct and still appear broken if the style choice is wrong. Switching styles is the fix that actually changes behavior. **Q: Does this download button work without JavaScript?** A: No. The download is triggered by the widget's own JavaScript, so visitors with JavaScript disabled will not get the file-download behavior. That detail matters because this is not a plain HTML link doing all the work behind the scenes. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH relies on script-driven click handling here. **Q: What happens when someone clicks the animated download button?** A: A real browser click test showed that clicking a Style 1 Download button starts an actual same-origin file download with no page navigation. The widget's JavaScript calls preventDefault(), creates a hidden link with the configured file and file name, and clicks it automatically. The button also gets its downloaded CSS class immediately on click and loses it again after 5 seconds.